4种防止模态框弹出时页面滚动的方法

优联前端

于 2024-08-06 09:49:07 发布

阅读量558

点赞数 5

分类专栏：优联前端（HTML/CSS/JS）文章标签： javascript 优联前端前端开发语言

本文链接：https://blog.csdn.net/ufrontend/article/details/140946226

版权

优联前端（HTML/CSS/JS）专栏收录该内容

41 篇文章 0 订阅

订阅专栏

1. Overflow:hidden — 经典方法

overflow:hidden CSS 属性是一种久经考验的防止滚动的方法。只需将一个类（例如，no-scroll）添加到 <body> 标签，并将其链接到带有 overflow:hidden 的 CSS 规则。

.no-scroll {
  overflow: hidden;
}

当模态框弹出时，使用 JavaScript 添加此类，并在模态框关闭时将其删除。此方法会停止滚动并隐藏滚动条。

2. Position: Fixed — 修复程序

想要在模态框弹出时保持页面原位？position: fixed 可以提供帮助！

向<body> 添加 no-scroll 之类的类并应用以下 CSS：

.no-scroll {
  position: fixed;
  width: 100%;
}

这会将页面锚定到视口，保持其原始宽度。请记住确保您的模态框具有适当的高度，否则内容可能会被截断。

3. 滚动事件 — JavaScript 大师

对于更注重 JavaScript 的方法，我们可以使用滚动事件在模态框出现时禁用滚动。

document.addEventListener('scroll', disableScroll);
function disableScroll() {
  window.scrollTo(0, 0);
}

当模式关闭时，删除事件监听器以重新启用滚动。此方法不需要更改 CSS，并且在桌面和移动设备上都能很好地工作。

4. Overscroll-Behavior：Contain — 现代选择

准备好采用更现代的方法了吗？overscroll-behavior 属性可以控制页面边缘的滚动行为。

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overscroll-behavior: contain;
}

通过将其设置为包含，可以阻止页面滚动，但允许在模式本身内滚动。请记住在模式关闭时删除此属性。

总结，请选择合适的方法

这 4 种方法都提供了在模式弹出时，阻止页面滚动的不同方法。再具体项目开发时，我们需要选择适合自己项目的情况，来匹配项目的需要，不能随意选择。

关于优联前端

武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技术研究的科技创新型公司，为合作伙伴提供专业高效的前端解决方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教育，医疗，餐饮等。有效的解决了合作伙伴的前端技术难题，节约了成本，实现合作共赢。承接Web前端，微信小程序、小游戏，2D/3D游戏，动画交互与UI广告设计等各种技术研发。