移動前端滑動插件——JRoll

        不知道是百度搜索的算法更新了還是什么原因，在百度上搜 jroll，搜索結果首頁看不到 JRoll 的官網

        也有可能是因為我拒絕了購買百度關鍵詞推廣，并且把百度聯盟的廣告都撤下了，什么原因不管了，

        這里提供一下官網地址：http://www.chjtx.com/JRoll/

—— 2018年12月05日更新

------------------------------------------- 我是分隔線，以下是原文 ----------------------------------------

        又過了一年，終于，第三篇博文要出爐了。

　　去年9月底，結束創業生涯后，我進入了一家外包公司從事移動前端工作，洽洽這年html5火到要爆，而具備html5技能的工程師卻千里難覓，雖然我一直從事PC端的工作，但憑借扎實的js基礎，也謀了個中級工程師的職位。多學點東西準沒錯的。

　　從事正規的前端工作后，我接觸到了underscore、ratchet、backbone、requirejs、seajs、cordova、angular等等一大堆前端框架工具，不禁感慨，原來我以前的圈子是那么的渺小。iscroll，相信大多數移動前端開發者都用過，在我創業那段時間也接觸過，由于當時不會用，擱置了。

　　進入公司后，iscroll便成了不可離開的工具。html5移動應用為了滿足業務需求，滑動操作也復雜起來，不再像純手機網站那樣一頁下來。而div的overflow:auto屬性，在移動設備的表現不太理想，為了解決滑動呆板問題，iscroll似乎成了救星。然而，iscroll并不是萬能的，當滑動的元素多起來時，卡頓、閃屏更為嚴重。為了控制頁面元素數量，只好采用增減法，即一次只顯示三頁，顯示第四頁時，將第一頁刪除，始終在屏幕上保持三頁的數量，并將位移減去第一頁的高度，以保持第二、三頁相對屏幕的位置不變。這樣一來，iscroll性能方面的缺陷得到了一個比較有效的解決方案。同時，運用空間換性能的方法，將加載過的頁面緩存下來，客戶體驗也是扛扛的。但是，iscroll這就滿足了我的需求？如果真是這樣的話，就不會有這篇博文了。

　　為了尋找一個更好的滑動插件，去年12月開始研究IScroll5，今年3月開始著手起草JRoll。我設計jroll的初衷是為解決iscroll的不足，如此一來，我必須先找出iscroll都有哪些缺陷。

　　以下是我感覺iscroll需要改進的地方：

　　1、性能方面，300條數據就會出現卡頓

　　2、scrollFree參數失效。scrollFree為false時，當左右滑動過程中不能進行上下滑動，上下滑動過程中不允許左右滑動。IScroll5出現的bug是當一開始就斜向滑動的話，scrollFree鎖定就會失效。

　　3、文件太多，iscroll、iscroll-infinite、iscroll-lite、iscroll-probe、iscroll-zoom共五個文件。iscroll是普通版，含滾動條。iscroll-infinite是無限循環版。iscroll-lite是精簡版，無滾動條。iscroll-probe是加強版，可監聽滑動并添加滑動事件。iscroll-zoom是縮放版。而且這幾個文件是不能同時使用的，否則會發生沖突。

　　4、文件太大，iscroll為了兼容pc，做了很多兼容處理，而且IScroll5里面有很多已經被棄用的代碼并沒有刪除。

　　5、滑動表單時光標丟失

　　好，既然問題已經找出來了，那么該如果解決？即便不能解決所有，也應該做到更好。

　　一、突破性能瓶頸

　　在研究iscroll源碼的過程中，發現造成卡頓的主要原因是使用了css3的transition-duration實現慣性滑動。眾所周之，css3動畫對設備性能要求比較高，在大面積使用時，對GPU來說更是一項極艱巨的挑戰。iscroll做得比較好的是，對于不支持transition-duration的手機使用requestAnimationFrame來補救。目前安卓4.1以上都支持transition-duration，但4.1~4.3性能表現不佳。4.2以上支持requestAnimationFrame，對于不支持requestAnimationFrame的手機可以用setTimeout代替。安卓4.2、4.3雖然支持requestAnimationFrame，但其它性能表現與setTimeout無異。值得高興的是，現在國內所有手機廠商基本上不再生產安卓4.4以下的手機。按現在的手機更替速度來看，一兩年后，html5開發者再也不用為兼容安卓低端機而頭疼。

　　經過測試，使用requestAnimationFrame實現慣性滑動，能滑起上萬條數據，雖然在安卓4.4以下效果會打點折扣，但數據多的時候比起transition-duration強多了，在IOS上表現溜溜的。還是蘋果牛逼。

　　權衡取舍，JRoll最終采用requestAnimationFrame來實現慣性滑動。為了降低開發成本及個人精力有限等問題，JRoll只支持webkit和blink內核的瀏覽器。至于其它內核的瀏覽器，一來沒時間調試，二來窮屌絲沒錢買設備(T_T)。

　　滑動頁面的實現原理是在touchmove時移動元素的位置，那到底用absolute好還是用translate好？網上也有不少文章對這兩個實現方法的討論，當然結論也會因系統環境、瀏覽器內核等因素而異。使用absolute移動位置，可以解決表單丟失光標的問題，但滑動流暢度總是那么的不盡人意。當然在安卓4.1以下系統表現會比translate好些，那些將要被淘汰的系統，我們就不必深究了。使用translate可以開啟3D加速，流暢度有了質的提升，只是在軟鍵盤彈出后滑動頁面時，某些系統如ios，某些安卓瀏覽器會出現光標不跟隨input輸入框的問題，但畢竟這并不影響業務流程的正常操作，況且也很少有人會在軟鍵盤彈出后去滑動頁面，因此translate還是比absolute更勝一籌。或許有些同學會問怎樣開啟3D加速，很簡單，要只用到css3任何一個3D屬性都會觸發硬件加速，例如transform:translateZ(0)。

　　二、解決scrollFree參數失效

　　剛剛又看了一下IScroll5的源碼，它的選項參數是freeScroll，我把free和scroll的順序搞反了，糗大了。本來還想著使用和iscroll一樣的API，避免打亂用戶習慣，現在JRoll已經上線了，改回來不太好，將錯就錯吧。iscroll的freeScroll實現方法是先滑動再判斷要鎖定哪個方向，這種做法導致的問題就是在斜向滑動時判斷失效。這里，額外補充一個小知識，preventDefault阻止瀏覽器默認行為這個屬性在滑動過程中才設置是不會生效的。例如，你想在橫向滑動時將preventDefault設為true，可以通過e.pageX和e.pageY的差值比較判斷正在進行橫向滑動還是豎向滑動抑或是斜向滑動，當然一般很少判斷斜向滑動，pageX的差值比pageY的差值大時都當作是橫向滑動。此時，如果你先豎向滑動，滑動已經開始，然后再橫向滑動，preventDefault并不會起作用。jroll修正freeScroll的方法是先判斷要鎖定哪個方向再執行滑動。簡單點說，就是touchmove的第一個移動位置不會使頁面滑動，而是用于判斷將要進行的方向，第二個移動位置才開始滑動頁面。

　　三、去繁從簡

　　iscroll將各項功能都拆分成單個文件，每個文件又不能一起使用，在一個項目既用到zoom又用到probe的話確實很讓人頭疼。jroll使用一個文件實現了滾動條、縮放、事件監聽等功能，開發者可不必再為到底使用哪個文件而手足無措。至于無限循環這個功能，將會做成jroll的插件。同時，基于jroll滑動的插件，如日期控件、日歷控件、分頁等等鄙人也在謀劃中，完成之后，html5開發的應用可不必使用input[type=date]來調用原生日期組件，直接調用jroll的日期插件可做到所有移動終端對于日期控件這塊體驗一致，敬請期待。

　　四、專注移動

　　iscroll為了兼容各種終端，而且升級后廢棄的代碼也沒有刪除，因此文件越來越龐大，這并不利用移動應用的開發。jroll一個嶄新的產品，沒有歷史遺留問題，而且專注于移動應用開發，代碼相當精簡，源文件24k，經過UglifyJS壓縮后才12k。當然也使用了mousemove、mousewheel等兼容谷歌瀏覽器非移動模擬器模式，這也是為了方便開發調試，占用的代碼量很少。jroll沒有像iscroll那樣在touchstart時preventDefault，因此不需要click:true來允許點擊a鏈接。jroll在安卓方面做了自動定位表單的優化，即是點擊input時可自動將input定位到可見位置不會被軟鍵盤遮擋，ios會自動定位不需要我們多此一舉去優化。

　　好了，說了這么多，讓大家一起來領略一下jroll。

　　jroll有五種引入方式：普通引入、CommonJS規范引入、RequireJS規范引入、SeaJS規范引入和強制普通方式引入。

　　使用時也是像iscroll那樣new一個。jroll = new JRoll("#wrapper", {bounce:true, zoom:true, ...})。

　　可選項一覽表：

　　兩個常用方法：refresh和scrollTo。

　　能看到這里，說明你很有毅力，若要更詳細的了解jroll，可訪問JRoll，現已開源到oschina，源碼地址：https://git.oschina.net/chenjianlong/JRoll

　　ps：一眨眼一年過去了，去年給客戶做的作品現在已經訪問不到了，唉，有時不得不感慨，現在的人腫么都那么浮躁，說好要做品牌的，結果才一年，客戶就把網站關掉了。不過請大家放心，jroll是放在我自己的服務器上的，絕對不會那么輕易閉站。只是窮屌絲只買得起阿里云550元每年的產品，訪問量多了可能會擠爆，沒關系，還可以到開源中國去下載源碼或在51cto本博客留言問我拿。