我正在使用 videobox 将流嵌入到我的网站中，我刚刚发现当 videobox 处于“打开”状态时 - 即我点击了一个链接，它打开并使它周围的所有内容变暗 - 我仍然可以向下滚动并查看我的(非灰色)网站的其余部分。这会破坏沉浸感，我想禁用滚动，但仅限于视频框打开时。
虽然我不知道从哪里开始。
最佳答案
据我所知，您不能仅使用 JavaScript 来执行此操作，因为 onscroll 事件是 not cancelable .
您可以通过将所有内容放置在容器 div 中，并将 height 和 width 设置为 100% 来实现这一点并在 html 和 body 元素上禁用溢出，因此您实际上在容器 div 上获得了滚动条。当您的视频框打开时，您可以打开一个覆盖层，将所有内容(包括容器上的滚动条)隐藏在它后面，并在其顶部显示视频框。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Prevent scrolling</title>
<style>
* { padding: 0; margin: 0; border: 0 }
html, body {
height: 100%;
overflow: hidden;
}
#container {
position: absolute;
height: 100%;
width: 100%;
overflow: auto;
}
#large-div {
background: #aaa;
height: 5000px;
width: 5000px;
}
#overlay {
position: absolute;
background: #fff;
opacity: 0.7;
-moz-opacity: 0.7;
-webkit-opacity: 0.7;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
height: 100%;
width: 100%;
z-index: 1000;
display: none;
}
#videobox-container {
position: absolute;
background: #dd8;
width: 600px;
height: 400px;
top: 50%;
left: 50%;
margin: -300px 0 0 -200px;
z-index: 1001;
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="large-div"></div>
</div>
<div id="overlay"></div>
<div id="videobox-container"></div>
<script>
function showVideoBox() {
// show both overlay and videobox-container
document.getElementById("overlay").style.display = "block";
document.getElementById("videobox-container").style.display = "block";
}
showVideoBox();
</script>
</body>
</html>
(您需要调整元素的位置，但您明白了。)
关于javascript - 视频框打开时防止滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3120712/