解决多场景/多端的页面滚动缩放组件-ScrollerJS

ScrollerJS是什么

ScrollerJS是用于纯逻辑的滚动缩放组件，它独立于任何指定的渲染或者事件系统。上面是官方定义的，我再说一下我对这个库的理解，这次我使用ScrollerJS主要是在处理移动端的页面滚动，不使用Scroller库的话，我们用原生的方法实现这种效果的话，就是监听页面的touch事件，其实页面本身就是在监听touch事件，实现页面跟随手势去移动。现在假设我们实现的效果是，类似于native app那种左右页面滑动的效果，依靠默认的touch事件肯定是不够的，我们通常的做法就是主动监听touch事件，修改touch事件默认的操作，这样就可以利用自带的touch事件实现自己的滚动缩放的需求。ScrollerJS帮我们做的就是这样的事情，大家可以打开 https://my.browser.miui.com/ ，右键F12切换成移动端模式，可以看到我们在滚动页面时，滚动是有惯性的，比如我们还需要做一个下拉刷新什么的，自己实现还是比较麻烦，ScrollerJS应用而生，我们在touch事件中调用ScrollerJS提供的事件，完成这一套丰富而又强大的功能

特性

• 可自定义启用/禁用x轴和y轴的滚动

  • 就是说可以自定义页面是否能在这俩轴滚动

• 减速（当用户动作结束时减速）

  • 移动端touch后的惯性

• 弹跳（弹回边缘）

  • 拖动页面一直往下拉，松手后，页面类似于小球掉地上，一直与边缘减速碰撞以至静止
• 分页（对齐整页宽度/高度）
• 捕捉（捕捉到用户可定义的像素网格）
• 缩放（自动居中缩放或基于视图中具有可配置的最小/最大缩放的点）