移動web滾動問題
在移動端如果使用局部滾動，意思就是我們的滾動在一個固定寬高的div內觸發，將該div設置成overflow:scroll/auto;來形成div內部的滾動，這時我們監聽div的onscroll發現觸發的時機區分android和ios兩種情況，具體可以看下面表格:
| 機型(內核) | body滾動 | 局部滾動 |
| :-: | :-: | :-: |
| ios | 不能實時觸發 | 不能實時觸發 |
| android | 實時觸發| 實時觸發 |
| ios wkwebview內核 | 實時觸發| 實時觸發 |
不能實時觸發表現：只在手指觸摸的屏幕上一直滑動時和滾動停止的那一刻才觸發。
關於模擬滾動
概念
正常的滾動：我們平時使用的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 樣式，那麼在滾動停止之前, 所有鼠標事件都將被禁止。當滾動結束之後，再移除該屬性。
// css 代碼
.disable-hover,
.disable-hover * {
pointer-events: none !important;
}
// js 代碼
var body = document.body,
timer;
window.addEventListener('scroll', function() {
clearTimeout(timer);
if(!body.classList.contains('disable-hover')) {
body.classList.add('disable-hover')
}
timer = setTimeout(function(){
body.classList.remove('disable-hover')
},500);
}, false);