iscroll开发总结

前言

在接手同事代码时发现他使用了react-iscroll插件，于是对其进行一些研究，写下该文章作为总结。

正文

本文通过原理和优点两方面来表达我对iscroll理解。

原理

iscroll的原理其实很简单，通过translate这个属性来代替原生的滚动，当然，其内部实现细节没有我说的这么简单，但是为什么要使用translate这个属性来代替原生的滚动呢？

translate属性

当浏览器发现你使用transform属性时，会采用GPU参与运算，最高可使你的动画达到60FPS。那么translate也属于transform，所以使用translate在性能上是非常流畅的。光这一点可能不会让你使用iscroll，但是当你的业务需求中出现下拉刷新上拉加载，或者要你在滑动过程中增加一些响应机制时，使用iscroll就可以非常简单的解决你的需求。

优点

Granular control over the scroll position, even during momentum. You can always get and set the x,y coordinates of the scroller.
Animation can be customized with user defined easing functions (bounce, elastic, back, ...).
You can easily hook to a plethora of custom events (onBeforeScrollStart, onScrollStart, onScroll, onScrollEnd, flick, ...).
Out of the box multi-platform support. From older Android devices to the latest iPhone, from Chrome to Internet Explorer.

优点就如官网所说，我就不拾人牙慧了。

1. 精确的控制滚动位置，即使在滚动中，你也可以去设置和得到滚动位置(scroll position);
2. 在整个滚动过程中，有许多勾子(hook)可以让你对整个滑动进行监测与控制，例如onBeforeScrollStart,onScrollEnd;
3. 跨平台，支持各种平台。