IScroll5滚动插件入门实践,监听滚动内容变化

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()方法刷新内容。

https://img.cssjs.cn/upload/1d57c418f62d9bfc69fe985a79bb7dd1.png

关闭(Esc)