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

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

我不知道从哪里开始。

【问题讨论】:

  • 是的,我玩过固定定位与绝对定位,但它似乎不起作用。在 videobox css 中更改它会破坏 videobox,我不想让我的网站始终不可滚动。

标签: javascript css scroll


【解决方案1】:

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

您可以通过将所有内容放在容器 height100% 中的 width 并禁用 htmlbody 元素上的溢出来实现此目的,因此您实际上可以在容器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”滚动的高度,而不仅仅是屏幕显示的内容。

      【讨论】:

        猜你喜欢
        • 2012-03-21
        • 2019-07-26
        • 2016-05-03
        • 2018-04-01
        • 1970-01-01
        • 1970-01-01
        • 2022-10-05
        • 1970-01-01
        • 2015-04-15
        相关资源
        最近更新 更多