正如摘要所述，本文将详细介绍如何使用 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 类名，该类名控制弹窗的显示/隐藏。
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 禁用弹窗弹出时的背景滚动。这种方法简单易懂，能够有效地提升用户体验。在实际开发中，你可以根据自己的需求进行修改和扩展，例如，添加动画效果、处理多个弹窗等。希望本文对你有所帮助！
