# 固定滚动条-禁止弹窗后页面滚动
# 快速导航
/**
 * 功能描述:一些业务场景,如弹框出现时,需要禁止弹窗背后页面滚动,这是兼容安卓和 iOS 禁止页面滚动的解决方案
 */
let scrollTop = 0;
function preventScroll() {
  // 存储当前滚动位置
  scrollTop = window.scrollY;
  // 将可滚动区域固定定位,可滚动区域高度为 0 后就不能滚动了
  document.body.style["overflow-y"] = "hidden";
  document.body.style.position = "fixed";
  document.body.style.width = "100%";
  document.body.style.top = -scrollTop + "px";
  // document.body.style['overscroll-behavior'] = 'none'
}
function recoverScroll() {
  document.body.style["overflow-y"] = "auto";
  document.body.style.position = "static";
  // document.querySelector('body').style['overscroll-behavior'] = 'none'
  window.scrollTo(0, scrollTop);
}
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
← 进入/退出全屏模式 获取页面元素css样式 →


