问题:很多情况下,移动端的页面并非只有一个页面,也可能会存在多个页面叠加的情况,比如嵌套路由,或者点击弹出一个新的页面。
底层的页面是可以滚动的,一般覆盖在上层的页面一般会采用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