当视频盒子打开时防止滚动

问题描述：

我使用视频盒子将视频流嵌入到我的网站中，并且我刚刚发现当视频盒子“开启”时 - 即点击了一个链接并将其变暗 - 我仍然可以向下滚动并查看我的（非灰色）网站的其余部分。这打破了沉浸，我想禁用滚动，但仅限于视频盒打开时。当视频盒子打开时防止滚动

我不知道从哪里开始。

http://stackoverflow.com/questions/422028/how-to-disable-scrollbars-with-javascript – huntaub 2010-06-25 19:02:38

是的，我玩过固定与绝对定位，但它似乎并没有工作。在videobox CSS中改变它打破了视频盒，我不想让我的网站不断滚动。 – EpsilonVector 2010-06-25 19:12:59

答

就我所知，你不能用JavaScript来做这件事，因为onscroll事件是not cancelable。

您可以通过在容器div与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>

（你必须拨弄了一下你的元素的位置，但你的想法。）

答

简单的解决方法是在视频开始播放后添加CSS body{overflow:hidden;}删除它。另外，你不能把视频盒子放在一个div标签中，并将其位置设置为固定的？

答

在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' 滚动的高度，而不仅仅是什么画面正在显示。

当视频盒子打开时防止滚动

相关推荐