移動web前端開發，頁面區域性滑動之iscroll框架
阿新 • • 發佈：2019-01-02
先看個簡單的，移動裝置上，橫向滑動內容塊的例子：
<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的引數淺析，實際中一些相容問題，在下次文章中來學習。