移動(dòng)端手指觸摸屏幕過于頻繁，移動(dòng)端會(huì)出現(xiàn)卡頓的現(xiàn)象，下面介紹幾種順暢滾動(dòng)的解決辦法。

一、 -webkit-overflow-scrolling

iOS中獨(dú)有的屬性，屬性控制元素在移動(dòng)設(shè)備上是否使用滾動(dòng)回彈效果.

overflow: scroll;
-webkit-overflow-scrolling: touch;//這個(gè)屬性可以實(shí)現(xiàn)，手指離開屏幕會(huì)慣性滑動(dòng)一段距離

-webkit-overflow-scrolling: touch; /* 當(dāng)手指從觸摸屏上移開，會(huì)保持一段時(shí)間的滾動(dòng) ，繼續(xù)滾動(dòng)的速度和持續(xù)的時(shí)間和滾動(dòng)手勢的強(qiáng)烈程度成正比。同時(shí)也會(huì)創(chuàng)建一個(gè)新的堆棧上下文。/
-webkit-overflow-scrolling: auto; / 當(dāng)手指從觸摸屏上移開，滾動(dòng)會(huì)立即停止 */

二、-webkit-transform: translateZ(0px);

熟悉瀏覽器渲染過程的小伙伴都知道。
頁面繪制的過程分為三個(gè)部分：layout、paint和合成。layout負(fù)責(zé)計(jì)算DOM元素的布局關(guān)系，paint負(fù)責(zé)將DOM元素繪制成位圖，合成則負(fù)責(zé)將位圖發(fā)送給GPU繪制到屏幕上。
當(dāng)某個(gè)DOM元素開啟硬件加速之后，瀏覽器會(huì)為此元素單獨(dú)創(chuàng)建一個(gè)“層”。當(dāng)有單獨(dú)的層之后，此元素的repaint操作將只需要更新自己，不用影響到別人。
哪些會(huì)CSS屬性會(huì)創(chuàng)建新的層呢？
https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

* It's the root object for the page
* It has explicit CSS position properties (relative, absolute or a transform)
* It is transparent
* Has overflow, an alpha mask or reflection
* Has a CSS filter
* Corresponds to <canvas> element that has a 3D (WebGL) context or an * * * accelerated 2D context
* Corresponds to a <video> element

* 根元素
* position：absolute/relative ，+z-index(不為auto）
* display: flex|inline-flex +z-index(不為auto）
* position: fixed
* transform 不為 "none"
* -webkit-overflow-scrolling：touch
* opacity屬性值小于 1 的元素
* mix-blend-mode屬性值不為 "normal"的元素
* filter值不為“none”的元素
* perspective值不為“none”的元素
* isolation 屬性被設(shè)置為 "isolate"的元素
* will-change

三、函數(shù)節(jié)流

參考：http://blog.csdn.net/u013510614/article/details/5192077
1、每當(dāng)觸發(fā)touchmove事件時(shí)，先延后執(zhí)行相應(yīng)的操作，設(shè)置一個(gè)定時(shí)器。如果在定時(shí)期間內(nèi)又出現(xiàn)新的touchmove事件，則取消剛剛的操作，重新設(shè)一個(gè)定時(shí)器。以保證一連串的觸發(fā)動(dòng)作后，最后一個(gè)動(dòng)作才真正的去執(zhí)行相應(yīng)的操作。
2、只有第一條顯然是不夠的，如果用戶一直不斷的觸發(fā)，就會(huì)一直得不到響應(yīng)。所以還有設(shè)一個(gè)固定的時(shí)間間隔，記住上一次執(zhí)行操作的時(shí)間，比較本次和上一次執(zhí)行了操作的時(shí)間差，大于固定的時(shí)間間隔的話，強(qiáng)制執(zhí)行。

var previous = null;
var atleast = 10;
$('body').on('touchmove', function (e) {
        var now = +new Date();
        if(!previous){
            previous = now;
        }
        if (now - previous > atleast){
            method();//要執(zhí)行的操作
            // 重置上一次開始時(shí)間為本次結(jié)束時(shí)間
            previous = now;
        }
        else{
            clearTimeout(timer);
            timer = setTimeout(function(){
                checkScroll(e);
            },200);
        }
}