禁用弹窗弹出时背景滚动：Web 开发实用指南-html教程-PHP中文网

禁用弹窗弹出时背景滚动：Web 开发实用指南

DDD

发布： 2025-09-23 21:06:01

原创

900人浏览过

禁用弹窗弹出时背景滚动：web 开发实用指南

正如摘要所述，本文将详细介绍如何使用 JavaScript 禁用网页弹窗弹出时的背景滚动。通过控制 body 元素的 overflow 属性，我们可以有效地阻止用户在弹窗显示时滚动背景内容，从而提供更专注、更流畅的用户体验。

使用 JavaScript 控制背景滚动

核心思想是：当弹窗显示时，将 body 元素的 overflow 属性设置为 hidden，从而禁用滚动；当弹窗关闭时，将 overflow 属性恢复为 auto 或 scroll，重新启用滚动。

以下是一个简单的 JavaScript 实现：

const modal = document.querySelector("#popup"); // 弹窗元素的选择器，请根据实际情况修改
const body = document.querySelector("body");
const openPopupButton = document.querySelector(".popupBG-Disable")

const showModal = function (e) {
  modal.classList.toggle("overlay"); // 切换弹窗的显示/隐藏状态

  if (!modal.classList.contains("overlay")) {
    body.style.overflow = "hidden"; // 禁用背景滚动
  } else {
    body.style.overflow = "auto"; // 启用背景滚动
  }
};

openPopupButton.addEventListener('click', showModal)

const closePopupButton = document.querySelector(".close");
closePopupButton.addEventListener('click', showModal)

登录后复制

代码解释：

选择元素： 使用 document.querySelector 获取弹窗元素 (#popup) 和 body 元素。请务必根据你的 HTML 结构修改选择器。
showModal 函数：
- 该函数用于切换弹窗的显示状态。
- modal.classList.toggle("overlay") 切换弹窗元素的 overlay 类名，该类名控制弹窗的显示/隐藏。
  
  ViiTor实时翻译
  AI实时多语言翻译专家！强大的语音识别、AR翻译功能。
  
  116
  
  查看详情
- body.style.overflow = "hidden" 在弹窗显示时禁用背景滚动。
- body.style.overflow = "auto" 在弹窗关闭时启用背景滚动。
- openPopupButton.addEventListener('click', showModal) 在点击弹窗的按钮时显示弹窗。
- closePopupButton.addEventListener('click', showModal) 在点击弹窗的关闭按钮时关闭弹窗。

HTML 结构示例：

<body class="bg-noscroll bg-scroll">
    <span><a class="popupBG-Disable" href="#popup">Full Recipe</a></span>
    <div id="popup" class="overlay">
        <div class="popup">
            <h3>Foxtail Millet Porridge:</h3>
            <a class="close" href="#">×</a>
            <div class="content">
                <span>Ingredients:<br>here are some things that you'd use to make this<br> isn't this amazing?<br>Yes, it is!<br>
                  this is getting loooooong<br>this will take me a while!<br>oh... yes it will<br>we're getting close<br>and we should be there                <br>or not...<br>Im losing hope<br>and patience<br>with how long this is taking<br>I could really cry<br>
                   but we'll get there soon<br>safe and sound<br>free as pie<br>I dont know what I meant by that<br>
                   this is taking long mannnn<br>
                </span>
            </div>
        </div>
    </div>
</body>

登录后复制

CSS 样式示例：

body {
  height: 200vh;
}
.bg-noscroll {

}
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  transform: translateY(-60px);
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}


.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.content {
  height: 250px;
}
.popup .content {
  overflow-y: scroll;
}

@media screen and (max-width: 700px){
  .popup{
    width: 70%;
 }

登录后复制

注意事项

选择器： 确保 JavaScript 代码中的选择器能够准确地选中弹窗元素和 body 元素。
CSS 样式： overlay 类名应该控制弹窗的显示/隐藏。
兼容性： 建议在不同浏览器上测试代码，确保兼容性。
性能： 如果页面上有大量的 JavaScript 代码，可以考虑使用事件委托来优化性能。

总结

通过本文的介绍，你已经学会了如何使用 JavaScript 禁用弹窗弹出时的背景滚动。这种方法简单易懂，能够有效地提升用户体验。在实际开发中，你可以根据自己的需求进行修改和扩展，例如，添加动画效果、处理多个弹窗等。希望本文对你有所帮助！

以上就是禁用弹窗弹出时背景滚动：Web 开发实用指南的详细内容，更多请关注php中文网其它相关文章！