移动端滚动的橡皮筋问题

在开发的时候遇到了移动端滚动问题，在网上找了很多办法都不行，于是自己试了下面这个方法可行。发出来希望能帮助更多的同学，大家有更好的方法也欢迎在下面分享出来~

这里面涉及到函数节流的知识，详见JavaScript 节流函数 Throttle 详解

• 问题描述：页面中有一个排行榜需要滚动，整个页面不允许滚动。但是排行榜（class=list）滚动到最上面和最下面，继续滚动，会导致整个页面下拉上拉（页面设置overflow:hidden和fixed也无法解决）
  分析：和事件冒泡无关，是移动端滚动的橡皮筋效果

• 解决方法：

  • 在body上监听touchmove事件
    1. 若target不在排行榜里（target若既不是list也不是list的子元素），则阻止默认事件
    2. 若target在排行榜里
       （以下判断需要进行函数节流，否则会很卡）
       1. 在list滚动到最上方时，阻止继续向下滚动事件；
       2. 在list滚动到最下方时，阻止继续向上滚动事件
  • 注意：不可以在list上的touchmove事件上禁止冒泡，否则下面的设置不生效

• 最终代码：

var startY, endY; // 记录滑动的开始Y坐标和当前Y坐标
var timer = null;
var previous = null;
var atleast = 10;

$('body').on('touchstart',function(e){
    startY = e.originalEvent.changedTouches[0].pageY;
});

// 禁用手机默认的触屏滚动行为
$('body').on('touchmove', function (e) {
    // 若target不在排行榜里
    if(!$(e.target).is($('.list')) && !$(e.target).parents('.list').length > 0){
        e.preventDefault();
    }

    // 若target在排行榜里
    else{
        // 函数节流
        var now = +new Date();
        if(!previous){
            checkScroll(e);
            previous = now;
        }
        if (now - previous > atleast){
            checkScroll(e);
            // 重置上一次开始时间为本次结束时间
            previous = now;
        }
        else{
            clearTimeout(timer);

            timer = setTimeout(function(){
                checkScroll(e);
            },200);
        }
    }
});

function checkScroll(e){
    console.log("check");

    endY = e.originalEvent.changedTouches[0].pageY;
    // 若已经移到页面最上方，则不允许再向下滑动
    if($('.list').scrollTop() == 0 && endY > startY){
        e.preventDefault();
    }
    // 若已经移到页面最下方，则不允许再向上滑动
    if($('.list').scrollTop() + $('.list').height() == $('.list')[0].scrollHeight && endY < startY){
        e.preventDefault();
    }
}