logo标签列表

当视频框出现时，防止滚动

javascriptcssscroll
3
我正在使用videobox将流媒体嵌入我的网站，我刚刚发现当videobox处于“开启”状态时-即我点击了一个链接并使其出现并使周围变暗时-我仍然可以向下滚动并查看我的（非变暗）网站的其余部分。这会破坏沉浸感，我想禁用滚动，但只在videobox开启时禁用。
然而，我不知道从哪里开始。
https://dev59.com/y0bRa4cB1Zd3GeqPxytc - jhleath
是的，我尝试过固定定位和绝对定位，但好像不起作用。在videobox的CSS中更改会破坏videobox，并且我不想使我的网站始终无法滚动。 - EpsilonVector
3个回答
1

据我所知，你不能仅使用JavaScript来实现这个功能，因为onscroll事件是不可取消的。

你可以通过将所有内容放在一个容器div中，并设置容器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>

（您需要稍微调整元素的位置，但是您已经明白了思路。）

0

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

0

简单的解决方案是在视频开始播放时添加CSS body{overflow:hidden;}，然后在播放结束后将其删除。此外，您可以不将视频框放在

标签中，并将其位置设置为固定吗？

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接