视频框打开时防止滚动答案

【问题标题】：Prevent scrolling when videobox is on视频框打开时防止滚动
【发布时间】：2010-06-25 19:00:37
【问题描述】：

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

我不知道从哪里开始。

【问题讨论】：

stackoverflow.com/questions/422028/…
是的，我玩过固定定位与绝对定位，但它似乎不起作用。在 videobox css 中更改它会破坏 videobox，我不想让我的网站始终不可滚动。

标签： javascript css scroll

【解决方案1】：

据我所知，你不能只使用 JavaScript 来做到这一点，因为 onscroll 事件是 not cancelable。

您可以通过将所有内容放在容器 height 和 100% 中的 width 并禁用 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>

（您将不得不稍微调整元素的位置，但您明白了。）

【讨论】：

【解决方案2】：

简单的解决方案是在视频开始播放时添加 css body{overflow:hidden;}，然后将其删除。还有，能不能不把video box放在div标签里，把它的位置设置成fixed？

【讨论】：

【解决方案3】：

在 videobox.js 中

替换第 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”滚动的高度，而不仅仅是屏幕显示的内容。

【讨论】：