移动端滚动的橡皮筋问题

2017.8月

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

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

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

• 解决方法：

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

• 最终代码：（jQuery）

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

$('body').on('touchstart',function(e){
    startY = e.touches[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.touches[0].pageY;
    // 若已经移到页面最上方，则不允许再向下滑动
    if($('.list').scrollTop() <= 0 && endY > startY){
        e.preventDefault();
    }
    // 若已经移到页面最下方，则不允许再向上滑动
    if($('.list').scrollTop() + $('.list').height() >= $('.list')[0].scrollHeight && endY < startY){
        e.preventDefault();
    }
}

2020.11.24更新

（看到很多人转载了我的文章，转载请注明来源哦~~）

新的发现：

1. 其实上文遇到的问题是两个，一是滚动溢出到父元素，二是滚动橡皮筋问题。
   上文的解决方法是通过解决橡皮筋问题，顺便也解决了滚动溢出问题，但应该还可以单独通过给排行榜增加 overscroll-behavior: contain; 或 none;避免滚动溢出行为
   （见张鑫旭大神的CSS overscroll-behavior让滚动嵌套时父滚动不触发）
   【注：并未写代码尝试，因为当时的项目已经不在了，欢迎大家尝试后回复在下面】
2. 绑定事件时，若使用addEventListener，要增加第三个参数 { passive: false } 才能使其中的preventDefault生效
   最近一次的DOM修订中对addEventListener的参数进行了修改，第三个参数允许传入一个对象，且其中passive: true是默认值（？），即默认preventDefault不生效（见EventTarget.addEventListener()）
3. 在preventDefault之前需要判断e.cancelable为true，否则chrome调试会报错：[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

遇到一个新问题：某页面列表，下拉到顶部时会出现橡皮筋，此时上拉滚动失败；上拉到底部时会出现橡皮筋，此时下拉滚动失败
更新一版Vue下的代码：（其中wrap元素为滚动对象）

<div ref="wrap" class="tab-wrap">

data () {
    return {
      startY: 0,
      touchMoveHandler: null // 节流函数的变量
    }
  },
mounted () {
    this.touchMoveHandler = throttle(this.checkScroll, 200)
    // 阻止滚动橡皮筋效果
    document.body.addEventListener('touchstart', this.touchStartHandler)
    document.body.addEventListener('touchmove', this.touchMoveHandler, { passive: false })
  },
  destroyed () {
    document.body.removeEventListener('touchstart', this.touchStartHandler)
    document.body.removeEventListener('touchmove', this.touchMoveHandler)
  },
  methods: {
    touchStartHandler (e) {
      this.startY = e.touches[0].pageY
    },
    checkScroll (e) {
      console.log('check')
      const endY = e.touches[0].pageY

      const scrollTop = this.$refs.wrap.scrollTop
      const offsetHeight = this.$refs.wrap.offsetHeight
      const scrollHeight = this.$refs.wrap.scrollHeight

      // 若已经移到页面最上方，则不允许再向下滑动
      if (scrollTop <= 0 && endY > this.startY && e.cancelable) {
        e.preventDefault()
      }
      // 若已经移到页面最下方，则不允许再向上滑动
      if (scrollTop + offsetHeight >= scrollHeight && endY < this.startY && e.cancelable) {
        e.preventDefault()
      }
    },