久以前，手機上的交互依賴鍵盤和觸控筆。我們要查看一個很長很長的列表，必須使用非常難用的觸控筆或鍵盤的上下左右鍵。后來黑莓發明了滾動球，緩解了大拇指按出繭的問題。

2007年，蘋果推出iPhone。iPhone只有一個玻璃屏，沒有觸控筆，直接用手指操作，支持多手指。Multi-Touch這項技術在推出時被譽為和Mouse（Mac），Click wheel（iPod）一樣革命性的發明。當然最近的3D Touch（Apple watch）也是革命性的。在推出iPhone之前，蘋果已經做了多年的鋪墊。2005年收購的小公司finger works就是專門做手勢識別的團隊，用macbook的人幾乎是脫離鼠標的，因為其觸控板非常好用，所用技術來自這家公司。

當時有很多程序猿和產品經理討論這個技術如何實現。瘋狂的Web開發者要在瀏覽器上實現基于鼠標中鍵的滾動效果：當很快地滾動中鍵并停止時，頁面由于慣性，會繼續往下滾動一段距離才停止。有一個專業名詞用來描述，叫Momentum Scrolling。還有人用Web寫了示例，用來模擬手指和屏幕交互過程中的數學邏輯，iScroll 和 Scrollability 都是不錯的作品。頭條的Web圖集也有使用Javascript（以下簡稱JS）實現的慣性滾動代碼。下面我們用最簡單的Scrollability來講解，如何實現慣性滾動。

一. 實現滾動

HTML代碼：
JS代碼：



頁面中有四個元素，頂部的黑條，底部的黑條，黑條中的窗口A，以及窗口內一堆英文名列表B（可以想象成辦公室的卷簾）。坐標系從窗口A左上角開始，橫軸X（右邊為正向），縱軸Y（下邊為正向）。注意，這里Y軸的方向和數學課本里相反。手指在窗口A上移動，往下移動一段距離，得到的 distanceY > 0。代碼由HTML，CSS和JS構成，HTML定義了兩個黑條，窗口A和卷簾B。CSS定義了他們的顏色，位置等屬性。Javascript則是重點要講的，它用來控制手指和屏幕的交互。JS中定義了幾個功能和變量，其中kBounceLimit這樣以k開頭的，是數學公式中的固定不變的參數。startX，startY，touchX，touchY用來記錄手指位置，touchAnimator是負責操作卷簾B滾動的對象。

這幾行代碼表示，當用戶手指觸碰到屏幕時，會執行onTouchStart，去做一些事情。手指在屏幕上移來移去時，會執行onTouchMove。手指離開屏幕的瞬間，硬件會通知程序手指離開，此時執行onTouchEnd。touchstart和touchend都是瞬間事件，從手指按下,移動,抬起的一套過程中只會被通知一次，touchmove是連續觸發的，移動1厘米，會收到幾十個通知，告訴程序當前手指坐標x,y，時間點。

讓卷簾隨著手指移動的辦法是，在touchstart時，記錄手指位置y1；touchmove時根據得到y2，算出當前移動的距離distance＝y2-y1，將卷簾在y軸上移動distance距離; touchmove不斷觸發，不斷執行前面兩步，把上一次的touchmove當作起始點，緊接著觸發的touchmove當作后來的點，計算distance移動卷簾。

iPhone在處理滾動的過程中，當頁面已經到最頂部時，再往下拉會有彈簧效果：手指拉了一個屏幕的距離，內容只移動了半屏。用這樣的代碼實現其效果：

velocity的含義是：手指在屏幕移動一段距離，觸發n個touchmove事件，相鄰兩個事件的y坐標之差就是velocity（速度）。

打個比方，老李跑步，他的步長就是 velocity。當老李還沒跑，想逃出森林公園南門時會有人把他往回拉。Velocity是1米，往回拉的彈性會給velocity打折，身體移動距離可能是0.8米，具體的折扣為：

(1.0 - (position - max) / bounceLimit)*kBounceLimit

position：當前卷簾移動到的位置，（逃出南門的距離）

parentOffsetHeight : 598 窗口A的高度

nodeOffsetHeight : 4602 卷簾B的長度

max：0

min：-4004 （parentOffsetHeight－nodeOffsetHeight，卷簾被擋住的長度，從下往上拉卷簾，最多移動的距離就是min值）

absMin ＝ min

absMax ＝ max

bounceLimit ：窗口高度 parentOffsetHeight＊kBounceLimit

kBounceLimit：0.75

轉換后，速度velocity衰減的系數為 0.75 - position/ 598，當position越大，velocity打折越多，越難往下拖動。

二. 慣性和回彈

接著，我們用代碼實現自由滾動和下拉時的回彈

在touchend時，加入takeoff()方法





takeoff方法中，根據手指離開屏幕時的velocity計算后面滾動動畫的代碼：

savekeyframe方法會保存計算出來的每一幀動畫，包含位置和時間點。

1. 自由滾動時的狀態：
   
   
   
   
   

2. 在頂部回彈時的狀態：
   
   
   
   
   
   
   position = easeOutExpo(decelStep, decelOrigin, decelDelta, kBounceTime);
   continues = ++decelStep <= kBounceTime && Math.floor(Math.abs(position)) > max;

   迭代計算position的公式為緩動曲線easeOut，接受的四個參數為：
   decelStep ：初始值為0，每次減速，自增1
   decelOrigin ：decelStep為0時 position值
   decelDelta ：decelStep為0時 max－position
   kBounceTime ：240
   對比linear,ease-in,ease-out和ease-in-out四個曲線，ease-out方程x＝easeOut(t)在一開始有平緩的加速，在時間t到50％時，位置x已經快到達70%，
   在后續50%的時間內減速直到停止。符合我們平時看到的iOS滾動邏輯。
   
   
   
   
   
   
   function easeOutExpo(t, b, c, d) { return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b }
   continues的計算
   

   自由滾動時：continues = Math.floor(Math.abs(velocity)*10) > 0； // Math.abs(velocity) < 0.1

   頂部回彈時：continues = ++decelStep <= kBounceTime && Math.floor(Math.abs(position)) > max; // decelStep<=240加位置約束

   底部回彈時：continues = ++decelStep <= kBounceTime && Math.ceil(position) < min； //同上

3. 底部上拉的狀態，同上。

4. saveKeyframe(!continues);
   time += kAnimationStep;
   

   作用是根據diff判斷是否保存這個關鍵幀，最后得到位置和時間的運動軌跡
   
   
   
   
   

5. 根據keyframes得到運動軌跡，再使用實現滾動的代碼，讓頁面運動起來。這里就不展開說明了
   

   
   （gif圖略卡，實際效果流暢很多）
   
   
   

三. 瀏覽器實現

蘋果和谷歌在意識到這個需求后，為web開發者提供了原生的支持。

之前需要用iscroll等框架的需求，Chrome瀏覽器只需 overflow:scroll 一行代碼即可。iOS設備需再加一行代碼 -webkit-overflow-scrolling: touch;

原生實現的好處是

1. 計算位置的過程要進行大量小數運算，這一點JS非常慢。

2. 慣性滾動是蘋果專利，原理涉及數學物理知識很多，遠比web開發者模仿出來的要復雜，而且不開源。

3. 如果滾動的內容非常長(手機通訊錄，微信朋友圈等)，要做延遲渲染，生成瓦片，貼圖，銷毀或者回收，內存管理，這些工作必須由系統支持，而不是業務支持。

4. iOS支持Scroll Snapping with CSS Snap Points（點擊訪問），在滾動結束時對齊到內部元素，只需要兩行css代碼。

隨著手機硬件的發展，瀏覽器和操作系統在圖形渲染，網絡API，數據存儲等方面的差距越來越小。而且瀏覽器面向業務，對底層架構的抽象更好，一行css，一個javascript對象可以替代幾千行java代碼（or 幾百行swift代碼？）。很多只在操作系統中提供的功能，例如消息推送，也已經在瀏覽器實現。

Web的開放性讓很多公司都對其添磚加瓦。你很難想象微軟會往Android倉庫中貢獻代碼，或者谷歌給IE瀏覽器解決bug，但他們確實都在為HTML5標準做貢獻。另一個例子是Adobe，他們希望將Photoshop中的濾鏡，圖層混合模式等功能提供給web開發者，于是提議做了css filter，css blender。

http://sarasoueidan.com/demos/css-blender/

還有很多簡單好玩的東西，以后會在博客中慢慢寫。如有描述錯誤和不當，請批評指正。

作者：王偉

動web滾動問題

在移動端如果使用局部滾動，意思就是我們的滾動在一個固定寬高的div內觸發，將該div設置成overflow:scroll/auto;來形成div內部的滾動，這時我們監聽div的onscroll發現觸發的時機區分android和ios兩種情況，具體可以看下面表格:

不能實時觸發表現：只在手指觸摸的屏幕上一直滑動時和滾動停止的那一刻才觸發。

關于模擬滾動

概念

正常的滾動：我們平時使用的scroll，包括上面講的滾動都屬于正常滾動，利用瀏覽器自身提供的滾動條來實現滾動，底層是由瀏覽器內核控制。

模擬滾動：最典型的例子就是iscroll了，原理一般有兩種：

• 監聽滾動元素的touchmove事件，當事件觸發時修改元素的transform屬性來實現元素的位移，讓手指離開時觸發touchend事件，然后采用requestanimationframe來在一個線型函數下不斷的修改元素的transform來實現手指離開時的一段慣性滾動距離。
• 監聽滾動元素的touchmove事件，當事件觸發時修改元素的transform屬性來實現元素的位移，讓手指離開時觸發touchend事件，然后給元素一個css的animation，并設置好duration和function來實現手指離開時的一段慣性距離。

方案比較

第一種方案由于慣性滾動的時機時由js自己控制所以可以拿到滾動觸發階段的scrolltop值，并且滾動的回調函數onscroll在滾動的階段都會觸發。第二種方案相比第一種要劣勢一些，區別在于手指離開時，采用的時css的animation來實現慣性滾動，所以無法直接觸發慣性滾動過程中的onscroll事件，只有在animation結束時才可以借助animationend來獲取到事件，當然也有一種方法可以實時獲取滾動事件，也是借助于requestanimationframe來不斷的去讀取滾動元素的transform來拿到scrolltop同時觸發onscroll回調。

正常滾動和模擬滾動的性能比較

模擬滾動的fps值波動較大，這樣滾動起來會有明顯的卡頓感覺，各位體驗的時候如果滾動超過10屏之后就可以明顯感覺到兩著的區別。

在使用模擬滾動時，瀏覽器在js層面會消耗更多的性能去改變dom元素的位置，在dom復雜層級深的頁面更為高，所以在長列表滾動時還要使用正常滾動更好。

滾動和下拉刷新

方案1：借助iscroll的原理，整個頁面使用模擬滾動，將下拉刷新元素放在頂部，當頁面滾動到頂部下拉時，下拉刷新元素隨著頁面的滾動出現，當手指離開時收回，此方案實現起來較為簡單直接借助iscoll即可，但是使用了模擬滾動之后在正常的列表滾動時性能上不如正常滾動。

方案2：頁面使用正常滾動，將下拉刷新元素放置在頂部top值為負值（正常情況下不可見），當頁面處于頂部時下拉，這時監聽touchmove事件，修改scrollcontent的tranlateY值，同時修改下拉刷新元素的tranlateY值，將兩者同時位移來將下拉刷新元素顯示出來，手指離開時（touchend）收回，這種方案滿足了在正常列表滾動時使用原生的滾動節省性能，只在下拉刷新時使用模擬滾動來實現效果。

方案3：方案2的改良版，唯一不同是將下拉刷新元素和scrollcontent放在一個div里，將下拉刷新元素的margintop設為負值，在下拉刷新時，只需要修改scrollcontent一個元素的tranlateY值即可實現下拉，在性能上要比方案2好。

還會有一個性能上的問題就是：當頁面的列表過長，dom元素過多時，在模擬滾動，下拉刷新這段時間內，頁面也會有卡頓現象，這里采取了一個優化策略即：

• 列表較長時dom數量較多時，在觸發下拉刷新的時機時將頁面視窗之外的dom元素隱藏或者存放在fragment里面。
• 在刷新完成之后手指離開（touchend）時將隱藏的元素顯示出來。
• 需要注意的是，隱藏和顯示視窗外的元素這個操作在下拉刷新時只會執行一次，并且只有在下拉刷新時才會執行。

下面介紹如何去優化scroll事件的觸發，避免scroll事件過度消耗資源：

防抖（Debouncing）和節流（Throttling）

scroll 事件本身會觸發頁面的重新渲染，同時 scroll 事件的 handler 又會被高頻度的觸發, 因此事件的 handler 內部不應該有復雜操作，例如 DOM 操作就不應該放在事件處理中。

特別是針對此類高頻度觸發事件問題（例如頁面 scroll ，屏幕 resize，監聽用戶輸入等）。

防抖（Debouncing）

防抖技術即是可以把多個順序地調用合并成一次，也就是在一定時間內，規定事件被觸發的次數。

節流（Throttling）

防抖函數確實不錯，但是也存在問題，譬如圖片的懶加載，我希望在下滑過程中圖片不斷的被加載出來，而不是只有當我停止下滑時候，圖片才被加載出來。又或者下滑時候的數據的 ajax 請求加載也是同理。這個時候，我們希望即使頁面在不斷被滾動，但是滾動 handler 也可以以一定的頻率被觸發（譬如 250ms 觸發一次），這類場景，就要用到另一種技巧，稱為節流函數（throttling）。

節流函數，只允許一個函數在 X 毫秒內執行一次。

與防抖相比，節流函數最主要的不同在于它保證在 X 毫秒內至少執行一次我們希望觸發的事件 handler。

關于防抖動與節流，我的博客文章也有提及。

使用rAF（requestAnimationFrame）觸發滾動事件

如果頁面只需要兼容高版本瀏覽器或應用在移動端，又或者頁面需要追求高精度的效果，那么可以使用瀏覽器的原生方法 rAF（requestAnimationFrame）。

window.requestAnimationFrame() 這個方法是用來在頁面重繪之前，通知瀏覽器調用一個指定的函數。這個方法接受一個函數為參，該函數會在重繪前調用。

rAF 常用于 web 動畫的制作，用于準確控制頁面的幀刷新渲染，讓動畫效果更加流暢，當然它的作用不僅僅局限于動畫制作，我們可以利用它的特性將它視為一個定時器。（當然它不是定時器）

通常來說，rAF 被調用的頻率是每秒 60 次，也就是 1000/60 ，觸發頻率大概是 16.7ms 。（當執行復雜操作時，當它發現無法維持 60fps 的頻率時，它會把頻率降低到 30fps 來保持幀數的穩定。）

var ticking = false; // rAF 觸發鎖
 
function onScroll(){
 if(!ticking) {
 requestAnimationFrame(realFunc);
 ticking = true;
 }
}
 
function realFunc(){
	// do something...
	console.log("Success");
	ticking = false;
}
// 滾動事件監聽
window.addEventListener('scroll', onScroll, false);

實現以16.7ms 觸發一次 handler，降低了可控性，但是提升了性能和精確度。

從本質上而言，我們應該盡量去精簡 scroll 事件的 handler ，將一些變量的初始化、不依賴于滾動位置變化的計算等都應當在 scroll 事件外提前就緒。

避免在scroll 事件中修改樣式屬性 / 將樣式操作從 scroll 事件中剝離

輸入事件處理函數，比如 scroll / touch 事件的處理，都會在 requestAnimationFrame 之前被調用執行。

因此，如果你在 scroll 事件的處理函數中做了修改樣式屬性的操作，那么這些操作會被瀏覽器暫存起來。然后在調用 requestAnimationFrame 的時候，如果你在一開始做了讀取樣式屬性的操作，那么這將會導致觸發瀏覽器的強制同步布局。

滑動過程中嘗試使用 pointer-events: none 禁止鼠標事件

pointer-events 是一個 CSS 屬性，可以有多個不同的值,大概的意思就是禁止鼠標行為，應用了該屬性后，譬如鼠標點擊，hover 等功能都將失效，即是元素不會成為鼠標事件的 target。

pointer-events: none 可用來提高滾動時的幀頻。的確，當滾動時，鼠標懸停在某些元素上，則觸發其上的 hover 效果，然而這些影響通常不被用戶注意，并多半導致滾動出現問題。對 body 元素應用 pointer-events: none ，禁用了包括 hover 在內的鼠標事件，從而提高滾動性能。

大概的做法就是在頁面滾動的時候, 給 添加上 .disable-hover 樣式，那么在滾動停止之前, 所有鼠標事件都將被禁止。當滾動結束之后，再移除該屬性。