移动端滚动的橡皮筋问题

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

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

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

1. 若target不在排行榜里（target若既不是list也不是list的子元素），则阻止默认事件
2. 若target在排行榜里
   （以下判断需要进行函数节流，否则会很卡） a. 在list滚动到最上方时，阻止继续向下滚动事件； b. 在list滚动到最下方时，阻止继续向上滚动事件

• 最终代码：

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){
            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();
    }
}