js得禁止页面滚动

简介: js得禁止页面滚动

web页面中,经常遇到一些弹窗内部有滚动条,可以滚动,弹窗后面的文档流也可以滚动,两个滚动区域会相互影响,用户体验不太好。

方案一、封装禁止、允许滚动方法

1、弹出弹窗,禁止滚动,并停留在当前位置

const disableScroll = (domId) => {
  var scrollTopVal = document.documentElement.scrollTop || document.body.scrollTop;
  // 禁止滑动
  const selectId = domId || 'app'
  const selectDom = document.getElementById(Id)
  if (selectDom && selectDom.style.position !== 'fixed') {
    selectDom.style.position = 'fixed'
    selectDom.style.top = '-' + scrollTopVal + 'px'
    selectDom.style.width = '100%'
    selectDom.style.overflow = 'hidden'
  }
}

2、关闭弹窗,恢复滚动,并恢复在停留位置

const enableScroll = (domId) => {
  /** *取消滑动限制***/
  const selectId = domId || 'app'
  const selectDom = document.getElementById(Id)
  if (selectDom && selectDom.style.position === 'fixed') {
    var scrollVal = Math.abs(parseFloat(selectDom.style.top))
    selectDom.style.position = ''
    selectDom.style.overflow = ''
    selectDom.style.top = ''
    if (document.body) {
      document.body.scrollTop = scrollVal
    }
    if (document.documentElement) {
      document.documentElement.scrollTop = scrollVal
    }
  }
}

快拿去试试吧

目录
相关文章
|
4天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
21 0
|
2天前
|
JavaScript 前端开发 流计算
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
|
3天前
countup.js包实现数字滚动-大屏项目
countup.js包实现数字滚动-大屏项目
6 1
|
4天前
|
JavaScript 前端开发
JS实现网页页面的框架(demo)
JS实现网页页面的框架(demo)
10 1
|
4天前
|
JavaScript 前端开发
js选取页面元素的方法
js选取页面元素的方法
14 2
|
4天前
|
JavaScript
如何在JS中实现修改URL参数而不刷新页面
如何在JS中实现修改URL参数而不刷新页面
|
4天前
|
JavaScript
js如何实现修改URL参数并不刷新页面
js如何实现修改URL参数并不刷新页面
|
4天前
|
JavaScript 前端开发
|
4天前
|
JavaScript 前端开发 UED
如何在JS中实现修改URL参数而不刷新页面
如何在JS中实现修改URL参数而不刷新页面
58 2