h5 穿透滚动

引子

h5 页面有弹窗浮层时,浮层之下若产生了滚动,滑动浮层时会让其产生滚动。这是示例页面,移动端访问如下:

63-problem

原因

找到的信息里面有两种说法:

  • 使用了 -webkit-overflow-scrolling: touch ,另外这个不是标准属性。
  • 浮层也是页面的一个元素,浮层的展示正常,页面中的其它元素按照本来的方式展示运作。也就是说这是一个正常的现象,只不过是我们不想要这种效果。

针对第一种说法,进行测试验证,这是示例页面,移动端访问如下:

63-no-touch

发现:跟 -webkit-overflow-scrolling: touch 无关。

处理方法

在网上找到的资料,主要有两种思路:

  1. 阻止 touch 相关的事件。
  2. 弹出浮层时,禁止元素滚动,浮层消失时,恢复滚动。

第一种思路在很多资料中提到有明显的缺陷:

  • 弹出层的滚动会有问题。
  • 会锁死滚动区域。
  • 弹出层的事件处理可能会产生影响。

较多采用第二种思路,但也有对应的问题:

  • 元素滚动的状态切换,会丢失滚动的位置。

针对滚动位置丢失问题,采用动态记录滚动位置的方式可以解决。

示例代码

// 以下方法使用的前提是产生滚动元素为 body
function fixedEle() {
  var scrollEle = document.body;
  // 有可能出现浮层内切换的情况,已经设置了就用重复设置了。
  if (scrollEle.style.position !== 'fixed') {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    scrollEle.style.cssText += 'position:fixed;top:-'+scrollTop+'px;';
  }
}

function recoverEle() {
  var scrollEle = document.body;
  var top = scrollEle.style.top;
  scrollEle.style.position = '';
  scrollEle.style.top = '';
  document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top);
}

这是示例页面,移动端访问如下:

63-solution

参考资料

猜你喜欢

转载自www.cnblogs.com/thyshare/p/12245152.html