前言
在接手同事代碼時(shí)發(fā)現(xiàn)他使用了react-iscroll插件，于是對(duì)其進(jìn)行一些研究，寫下該文章作為總結(jié)。
正文
本文通過(guò)原理和優(yōu)點(diǎn)兩方面來(lái)表達(dá)我對(duì)iscroll理解。
原理
iscroll的原理其實(shí)很簡(jiǎn)單，通過(guò)translate這個(gè)屬性來(lái)代替原生的滾動(dòng)，當(dāng)然，其內(nèi)部實(shí)現(xiàn)細(xì)節(jié)沒(méi)有我說(shuō)的這么簡(jiǎn)單，但是為什么要使用translate這個(gè)屬性來(lái)代替原生的滾動(dòng)呢？
translate屬性
當(dāng)瀏覽器發(fā)現(xiàn)你使用transform屬性時(shí)，會(huì)采用GPU參與運(yùn)算，最高可使你的動(dòng)畫達(dá)到60FPS。那么translate也屬于transform，所以使用translate在性能上是非常流暢的。光這一點(diǎn)可能不會(huì)讓你使用iscroll，但是當(dāng)你的業(yè)務(wù)需求中出現(xiàn)下拉刷新上拉加載，或者要你在滑動(dòng)過(guò)程中增加一些響應(yīng)機(jī)制時(shí)，使用iscroll就可以非常簡(jiǎn)單的解決你的需求。
優(yōu)點(diǎn)
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.
優(yōu)點(diǎn)就如官網(wǎng)所說(shuō)，我就不拾人牙慧了。
- 精確的控制滾動(dòng)位置，即使在滾動(dòng)中，你也可以去設(shè)置和得到滾動(dòng)位置(scroll position);
- 在整個(gè)滾動(dòng)過(guò)程中，有許多勾子(hook)可以讓你對(duì)整個(gè)滑動(dòng)進(jìn)行監(jiān)測(cè)與控制，例如
onBeforeScrollStart,onScrollEnd; - 跨平臺(tái)，支持各種平臺(tái)。
