html滚动插件 IScroll5

最新推荐文章于 2024-05-07 23:35:53 发布

车家大少爷

最新推荐文章于 2024-05-07 23:35:53 发布

阅读量724

点赞数

分类专栏： IScroll 滚动插件前端文章标签： IScroll 滚动插件 html

前端同时被 3 个专栏收录

132 篇文章 8 订阅

订阅专栏

滚动插件

1 篇文章 0 订阅

订阅专栏

IScroll

0 篇文章 0 订阅

订阅专栏

参考https://www.cnblogs.com/hellman/p/6046790.html

源码下载：https://pan.baidu.com/s/1RrJvYVL-GNL_wdMzBPajsg
提取码：m9ot
源码示例
在这里插入图片描述

效果如下：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<title>test</title>

<script type="text/javascript" src="../../build/iscroll.js"></script>

<script type="text/javascript">

var myScroll;

function loaded () {
	myScroll = new IScroll('#wrapper', { scrollX: true, scrollY: true, scrollbars: true });
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

</script>

<style>
	
#wrapper {
	position: absolute;
	z-index: 1;
	top: 45px;
	bottom: 48px;
	left: 0;
	width: 375px;
	height: 667px;
	background: #ccc;
	overflow: hidden;
}


#scroller {
	position: absolute;
	z-index: 1;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	width: 2000px;
}

</style>

</head>
<body onload="loaded()">

<div id="wrapper">
	<div id="scroller">
		<p>111111111111111111111111111111111111111111111111111111111</p>
		<p>222222222222222222222222222222222222222222222222222222222</p>
		<p>333333333333333333333333333333333333333333333333333333333</p>
		<p>444444444444444444444444444444444444444444444444444444444</p>
		<p>555555555555555555555555555555555555555555555555555555555</p>
		<p>666666666666666666666666666666666666666666666666666666666</p>
		<p>777777777777777777777777777777777777777777777777777777777</p>
		<p>888888888888888888888888888888888888888888888888888888888</p>
		<p>999999999999999999999999999999999999999999999999999999999</p>
		<p>111111111111111111111111111111111111111111111111111111111</p>
		<p>222222222222222222222222222222222222222222222222222222222</p>
		<p>333333333333333333333333333333333333333333333333333333333</p>
		<p>444444444444444444444444444444444444444444444444444444444</p>
		<p>555555555555555555555555555555555555555555555555555555555</p>
		<p>666666666666666666666666666666666666666666666666666666666</p>
		<p>777777777777777777777777777777777777777777777777777777777</p>
		<p>888888888888888888888888888888888888888888888888888888888</p>
		<p>999999999999999999999999999999999999999999999999999999999</p>
		<p>111111111111111111111111111111111111111111111111111111111</p>
		<p>222222222222222222222222222222222222222222222222222222222</p>
		<p>333333333333333333333333333333333333333333333333333333333</p>
		<p>444444444444444444444444444444444444444444444444444444444</p>
		<p>555555555555555555555555555555555555555555555555555555555</p>
		<p>666666666666666666666666666666666666666666666666666666666</p>
		<p>777777777777777777777777777777777777777777777777777777777</p>
		<p>888888888888888888888888888888888888888888888888888888888</p>
		<p>999999999999999999999999999999999999999999999999999999999</p>
	</div>
</div>

</body>
</html>