移动端滑动卡顿问题

移动端手指触摸屏幕过于频繁，移动端会出现卡顿的现象，下面介绍几种顺畅滚动的解决办法。

一、 -webkit-overflow-scrolling

iOS中独有的属性，属性控制元素在移动设备上是否使用滚动回弹效果.

overflow: scroll;
-webkit-overflow-scrolling: touch;//这个属性可以实现，手指离开屏幕会惯性滑动一段距离

-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 ，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。/
-webkit-overflow-scrolling: auto; / 当手指从触摸屏上移开，滚动会立即停止 */

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

* 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 属性被设置为 "isolate"的元素
* will-change

三、函数节流

var previous = null;
var atleast = 10;
$('body').on('touchmove', function (e) {
        var now = +new Date();
        if(!previous){
            previous = now;
        }
        if (now - previous > atleast){
            method();//要执行的操作
            // 重置上一次开始时间为本次结束时间
            previous = now;
        }
        else{
            clearTimeout(timer);
            timer = setTimeout(function(){
                checkScroll(e);
            },200);
        }
}