移动端的巨坑-滚动穿透bug的解决

问题：很多情况下，移动端的页面并非只有一个页面，也可能会存在多个页面叠加的情况，比如嵌套路由，或者点击弹出一个新的页面。

　　底层的页面是可以滚动的，一般覆盖在上层的页面一般会采用fixed固定定位（上层页面也可能可以滚动），这个时候，当手指滑动上层页面的时候，就会发生滚动穿透，会带动底层的页面滚动！！

解决方案1：

　　1. 定义一个固定body的方法，当要进入覆盖在上层页面的时候去调用

export function fixedBody() {
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    document.body.style.cssText += `position:fixed;top:-${scrollTop}px;width:100%;overflow:hidden`;
}

　　2. 定义一个还原body的方法，当要离开覆盖在上层页面的时候去调用，进测试，就可以解决了移动端滚动穿透的问题

export function looseBody() {
    let body = document.body;
    body.style.position = '';
    let top = body.style.top;
    document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top);
    document.body.style.cssText = ``;
    body.style.top = '';
}

解决方案2：

可以使用better-scroll移动端滚动插件去代替原生的滚动，也可以解决移动端滚动穿透的问题，具体使用可以参考官方文档。

官方文档手册: http://ustbhuangyi.github.io/better-scroll/doc/api.html

npm better-scroll --save

原生滚动条的缺点：

1. 在真机上可以下拉回弹，有可能会看到里面元素的内容

2. 子级滚动条的滚动会带动父级滚动条的滚动

解决方法：用better-scroll代替原生的滚动

better-scroll使用方法：
new BScroll(wrapper)

使用注意点：1. 当内容DOM发生变化，高度或者宽度发生变化了，一定要重新调用一下refresh()方法！！

2. better-scroll传入的一个wrapper DOM对象，必须要设置一个高度或者宽度例如100vh或者100vw, 要设置第一个滚动的子元素超出部分隐藏 overflow: hidden;

3. better-scroll会选中wrapper下的第一个DOM元素，给其添加上一些滚动的样式，因此，需要滚动的内容内存还需要一个元素包裹起来

4. 使用better-scroll后，会阻止页面元素上一些默认行为，比如a标签的跳转，以及a标签按下激活的样式 a:active

移动端的巨坑-滚动穿透bug的解决

猜你喜欢