iscroll5 使用说明
今天使用了一下iscroll5的例子。做了一个侧滑的webapp demo。
html结构
<div id="wrapper">
<div id="scroller">
这里是内容,scroller的高度一定高于wrapper的高度。wrapper为滚动区域,scroller为滚动的内容。
</div>
</div>
css样式
#wrapper {
position: absolute;
z-index: 1;
top: 45px;
bottom: 48px;
left: 0;
width: 100%;
background: #ccc;
overflow: hidden;
}
#scroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
javascript 调用
var myScroll;
function loaded () {
myScroll = new IScroll('#wrapper', {
scrollbars: true,
mouseWheel: true,
interactiveScrollbars: true,
shrinkScrollbars: 'scale',
fadeScrollbars: true
});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
参考资料
官网
这里有放在github上的例子
iscroll4api说明