1,问题表现
一般在弹窗组件打开时,会禁止页面滚动——通过给 body
设置 overflow: hidden;
实现。
而在部分移动端浏览器中,因为有导航栏的原因,弹窗打开可以上下滑动一小段距离来显示和隐藏导航栏。
现在的需求是:弹窗打开时,页面无法做任何滚动,导航栏不会隐藏,并且不能下拉刷新。
2,解决
思路:猜测可能是因为原生滚动的问题。所以可设置滚动不在 body
上产生,而是在 body 的子元素 div#app
上(以 vue项目为例)。
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
overflow: hidden;
}
#app {
height: 100%;
overflow-y: auto;
}
以上。