解决在手机上无法顺利监听onscroll事件

Posted on In

在进行制作视差滚动效果时，需要获得每时每刻滚动条的位置以进行计算，因此会使用window.onscroll来监听滚动条的位置。在pc上可以顺利的连续获得滚动条的任意时刻的坐标，然而在手机上无法顺利获得连续的事件触发。原因是移动端为了获得流畅的滚动效果与弹性效果，对于系统原生的滚动事件进行了限制，因此无法获得连续的滚动事件。

为了在移动端上实现视差网页效果，需要手动模拟用户滚动的事件，这样才能连续获取事件触发。通常使用iscroll等帮助实现效果。

在寻找相关滚动库的时候发现了一款小巧又好用的滚动js库 Jroll,大小仅仅只有13KB,比iscroll的lite版本还要小一半，而且能够完整实现需求。

Git地址:https://git.oschina.net/chenjianlong/JRoll2

官网:http://www.chjtx.com/JRoll/

用法：

引用<script src='jroll.js'></script>后，在文档中定义好滚动对象与滚动容器，例如 

1
2
3
4
<div id="wrapper">
    <div id="scroller">
    </div>
</div>

其中scroller为滚动对象，wrapper为滚动容器。需要注意的是滚动对象的高必须大于滚动容器的高才能顺利地进行滚动操作（废话）

接着创建jroll对象，如下所示 

1
jroll = new JRoll("#wrapper", {option});

其中option为配置内容，具体使用方法见官网。

另外，当在页面(滚动对象)中存在类似于动态加载与文本展开等情况的时候，在加载完毕与文本展开动画播放完毕的时候必须要使用jroll.refresh()对jroll对象进行刷新，不然jroll的高度不会发生改变从而使页面显示不全。

在项目中，使用jroll完美地完成了视差滚动效果的实现，在ios设备上的webapp中滚动动画打到了40fps以上。 

1
2
3
jroll.on('scroll', function() {
    //视差滚动计算
});