浅谈iScroll5使用

最近做手机端页面，关于滚动条方面，在左思右想后决定使用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会给你带来惊喜。

猜你喜欢