前言
在接手同事代碼時發(fā)現(xiàn)他使用了react-iscroll插件谷徙,于是對其進行一些研究,寫下該文章作為總結(jié)驯绎。
正文
本文通過原理和優(yōu)點兩方面來表達我對iscroll理解完慧。
原理
iscroll的原理其實很簡單,通過translate這個屬性來代替原生的滾動剩失,當然屈尼,其內(nèi)部實現(xiàn)細節(jié)沒有我說的這么簡單,但是為什么要使用translate這個屬性來代替原生的滾動呢拴孤?
translate屬性
當瀏覽器發(fā)現(xiàn)你使用transform屬性時脾歧,會采用GPU參與運算,最高可使你的動畫達到60FPS演熟。那么translate也屬于transform鞭执,所以使用translate在性能上是非常流暢的。光這一點可能不會讓你使用iscroll芒粹,但是當你的業(yè)務(wù)需求中出現(xiàn)下拉刷新上拉加載兄纺,或者要你在滑動過程中增加一些響應(yīng)機制時,使用iscroll就可以非常簡單的解決你的需求化漆。
優(yōu)點
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)點就如官網(wǎng)所說估脆,我就不拾人牙慧了。
- 精確的控制滾動位置获三,即使在滾動中旁蔼,你也可以去設(shè)置和得到滾動位置(scroll position);
- 在整個滾動過程中锨苏,有許多勾子(hook)可以讓你對整個滑動進行監(jiān)測與控制,例如
onBeforeScrollStart
,onScrollEnd
; - 跨平臺棺聊,支持各種平臺伞租。