移动端滚动的橡皮筋问题

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

这里面涉及到函数节流的知识，详见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();    }}