Javascript 打开videobox时防止滚动_Javascript_Css_Scroll

Javascript 打开videobox时防止滚动

javascript css scroll

Javascript 打开videobox时防止滚动,javascript,css,scroll,Javascript,Css,Scroll,我正在使用videobox将流嵌入到我的站点中，我刚刚发现，当videobox处于“打开”状态时（即，我单击了一个链接将其打开并使其周围的所有内容变暗），我仍然可以向下滚动并查看我站点的其余部分（未变暗）。这会破坏沉浸感，我想禁用滚动，但仅限于视频框打开时我不知道从哪里开始据我所知，仅仅使用JavaScript是无法做到这一点的，因为onscroll事件是您可以通过将所有内容放置在容器div中，高度和宽度为100%并禁用html和body元素上的溢出来实现这一点，因此您实际上可以获得容器d

我正在使用videobox将流嵌入到我的站点中，我刚刚发现，当videobox处于“打开”状态时（即，我单击了一个链接将其打开并使其周围的所有内容变暗），我仍然可以向下滚动并查看我站点的其余部分（未变暗）。这会破坏沉浸感，我想禁用滚动，但仅限于视频框打开时

我不知道从哪里开始

据我所知，仅仅使用JavaScript是无法做到这一点的，因为

onscroll

事件是

您可以通过将所有内容放置在容器

div

中，高度

和宽度为100%
并禁用html
和body
元素上的溢出来实现这一点，因此您实际上可以获得容器div
上的滚动条。当您的videobox打开时，您可以打开一个覆盖，隐藏其后面的所有内容（包括容器上的滚动条），并在其顶部显示videobox
<!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>


防止滚动
*{填充：0；边距：0；边框：0}
html，正文{
身高：100%；
溢出：隐藏；
}
#容器{
位置：绝对位置；
身高：100%；
宽度：100%；
溢出：自动；
}
#大div{
背景：#aaa；
高度：5000px；
宽度：5000px；
}
#覆盖层{
位置：绝对位置；
背景：#fff；
不透明度：0.7；
-moz不透明度：0.7；
-webkit不透明度：0.7；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=70）”；
过滤器：α（不透明度=70）；
身高：100%；
宽度：100%；
z指数：1000；
显示：无；
}
#视频盒容器{
位置：绝对位置；
背景:#dd8；
宽度：600px；
高度：400px；
最高：50%；
左：50%；
利润率：-300px0-200px；
z指数：1001；
显示：无；
}
函数showVideoBox（）{
//显示覆盖和视频框容器
document.getElementById（“覆盖”）.style.display=“块”；
document.getElementById（“videobox容器”）.style.display=“block”；
}
showVideoBox（）；

（你必须稍微调整一下元素的位置，但你会明白的。）
简单的解决方案是在视频开始播放时添加css主体{overflow:hidden；}
，然后将其删除。此外，您能否将视频框放入div标记中，并在videobox.js中将其位置设置为fixed？

更换第80行
    this.overlay.setStyles({'top': window.getScrollTop()+'px', 'height': window.getHeight()+'px'});

为此：
this.overlay.setStyles({top:-$(window).getScroll().y,height:$(window).getScrollSize().y+$(window).getScroll().y});

从本质上说，这是“y”滚动的高度，而不仅仅是屏幕显示的高度。
是的，我使用了固定与绝对定位，但似乎不起作用。在videobox css中更改它会破坏videobox，我不想让我的站点一直不可滚动。