移动web前端开发，页面局部滑动之iscroll框架

最新推荐文章于 2023-08-10 08:36:10 发布

zanazh

最新推荐文章于 2023-08-10 08:36:10 发布

阅读量2.6k

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/zanazh/article/details/7884006

版权

前端开发专栏收录该内容

11 篇文章 0 订阅

订阅专栏

先看个简单的，移动设备上，横向滑动内容块的例子：

<head>
<style>
body,ul,li {
	padding:10px;
	margin:0;
}


body {
	font-size:12px;
	-webkit-user-select:none;
    -webkit-text-size-adjust:none;
	font-family:helvetica;
}


#wrapper {
	width:300px;
	height:160px;


	float:left;
	position:relative;	/* On older OS versions "position" and "z-index" must be defined, */
	z-index:1;			/* it seems that recent webkit is less picky and works anyway. */
	overflow:hidden;


	background:#aaa;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-o-border-radius:10px;
	border-radius:10px;
	background:#e3e3e3;
}


#scroller {
	width:2100px;
	height:100%;
	float:left;
	padding:0;
}
#scroller ul {
	list-style:none;
	display:block;
	float:left;
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	text-align:left;
}
#scroller li {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
	display:block; float:left;
	width:300px; height:160px;
	text-align:center;
	font-family:georgia;
	font-size:18px;
	line-height:140%;
}
</style>
<script src="iscroll.js"></script>
<script>
var myscroll;
function loaded() {
myScroll = new iScroll('wrapper', {
snap: true,
hScrollbar: false});
}
document.addEventListener("DOMContentLoaded",loaded,false);
</script>
</head>
<body>
<div id="wrapper">
	<div id="scroller">
		<ul>
			<li><img src="images/1.jpg"></li>
			<li><em>A robot must obey any orders given to it by human beings, except where such orders would conflict with the First Law.</em></li>
			<li><img src="images/2.gif"></li>
			<li><em>A robot may not harm humanity, or, by inaction, allow humanity to come to harm.</em></li>
			<li><img src="images/3.gif"></li>
		</ul>
	</div>
</div>
</body>

此段代码可以实现，在移动设备上，横向滑动内容块的效果。
关于iscroll的参数浅析，实际中一些兼容问题，在下次文章中来学习。

zanazh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动web前端开发，页面局部滑动之iscroll框架

先看个简单的，移动设备上，横向滑动内容块的例子：body,ul,li { padding:10px; margin:0;}body { font-size:12px; -webkit-user-select:none; -webkit-text-size-adjust:none; font-family:helvetica;}
复制链接

扫一扫

专栏目录