版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012761510/article/details/73501363
最近做手机端页面,关于滚动条方面,在左思右想后决定使用iscroll5插件,然后就开始了漫长的填坑路~~~
简单说下iScroll5的使用,据说灰常灰常简单
1、html的基本结构
<div id="wrapper">
//一般只有wrapper里的第一个子元素才可以滚动,如果想要更多的元素滚动,可以嵌套一层id为scroller的div
<div id="scroller">
<ul id="uls"></ul>
</div>
</div>
2、动态生成li标签
var ul=document.getElementById("uls");
for(var i=0;i<70;i++){
var li= document.createElement("li");
ul.appendChild(li);
}
3、引入相关js文件
<script type="text/javascript" src="./js/phone/iscroll.js"></script>
4、初始化
var myScroll;
function loaded(){
setTimeout(function () {
myScroll =new IScroll('#wrapper', {
probeType: 2,//probeType:1对性能没有影响。在滚动事件被触发时,滚动轴是不是忙着做它的东西。probeType:2总执行滚动,除了势头,反弹过程中的事件。这类似于原生的onscroll事件。probeType:3发出的滚动事件与到的像素精度。注意,滚动被迫requestAnimationFrame(即:useTransition:假)。
scrollbars: false,//有滚动条
mouseWheel: true,//允许滑轮滚动
fadeScrollbars: true,//滚动时显示滚动条,默认影藏,并且是淡出淡入效果
bounce:true,//边界反弹
interactiveScrollbars:true,//滚动条可以拖动
shrinkScrollbars:'scale',// 当滚动边界之外的滚动条是由少量的收缩。'clip' or 'scale'.
click: true ,// 允许点击事件
keyBindings:true,//允许使用按键控制
momentum:true// 允许有惯性滑动
});
}, 1500);
}
document.addEventListener('touchmove',false);
window.addEventListener("load",loaded,false);
5、相关css
#wrapper {
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
width: 100%;
height: 100%;
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;
}
然后,就可以正常使用啦
但是,
你真的以为是这样嘛。作为小白,不出个错都对不起自己啊,在我以为大功告成时,惊讶的发现页面居然无法滚动,呵呵哒。继续研究API,写demo,一用到项目上就呵呵了。
最后的最后,被一句话救了命
console.log(myScroll);
输出结果:
没错,正常情况下scrollHeight大于wrapperHeight,这样页面才可以正常滚动。我在项目上打印myScroll上两者居然相等,找到问题啦,一切迎刃而解。至此,是我写这篇博文的主要目的,如果对项目问题毫无头绪,console.log会给你带来惊喜。