移动端浏览器打开弹窗时的滑动问题

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;
}

---

以上。