滚动穿透问题

问题描述

当浮层滚动触底时, 再次滑动浮层时, 浮层下面的页面会进行滚动, 即滚动穿透

解决办法

通过position: fixed将body固定在当前位置, 关闭浮层时, 再将清除该样式, 将页面滚动值设置为之前的值.

代码

  function stopBodyScroll (isFixed) {
    var top;
    if (isFixed) {
      top = document.documentElement.scrollTop || document.body.scrollTop
      document.body.style.position = 'fixed'
      document.body.style.top = -top + 'px'
    } else {
      top = -parseInt(document.body.style.top)
      document.body.style.position = ''
      document.body.style.top = ''

    // 回到原先的top
    document.documentElement.scrollTop ?  document.documentElement.scrollTop = top : document.body.scrollTop = top
    }
  }

注意

1. 关闭浮层, 恢复滚动时, 不能不能使用document.documentElement.scrollTop的值, 由于设置了position, 其值为0, 因此需要通过top的值获取

2. PC端可以直接通过设置body的overflow: hidden属性, 来固定底层页面, 但是该方法再移动端无效