IScroll是一个针对部分手机端滚动不流畅的一个解决方案,IOS在使用overflow:scroll时,滚动不是特别的顺畅,这个时候使用iscroll就很好的兼容这个问题。
在使用iscroll之前,需要指定页面的html代码,也就是说下面的代码是iscroll代码的基础。
<div id="wrapper"> <div class="scroller"> <!-- 内容 --> </div> </div>
其中wrapper是内容的一个封装,指定了我们需要在什么范围内滚动,就是说wrapper需要指定高度。
scroller是我们要滚动的内容,之所以要用scroller将滚动的内容封装,是因为scroller的滚动不依赖浏览器,而是由iscroll指定scroller的位置。
这个时候,我们就可以使用iscroll插件进行初始化滚动区域了。
// 获取wrapper元素对象 var wrapper = document.getElementById('wrapper'); // 初始化滚动区域 var myScroll = new IScroll('#wrapper', { click: true, // 是否使用click点击事件 mouseWheel: true, // 是否使用滚轮 scrollbars: true, // 是否显示滚动条 });
对于一些固定的,没有变化的内容,我们这个时候就可以使用iscroll进行滚动了。
对于异步请求的数据,我们可以先使用上面的代码对滚动区域进行初始化,待数据更新后,可以使用myScroller.refresh()方法刷新内容。