當視頻盒子打開時防止滾動

我使用視頻盒子將視頻流嵌入到我的網站中，並且我剛剛發現當視頻盒子「開啓」時 - 即點擊了一個鏈接並將其變暗 - 我仍然可以向下滾動並查看我的（非灰色）網站的其餘部分。這打破了沉浸，我想禁用滾動，但僅限於視頻盒打開時。當視頻盒子打開時防止滾動

我不知道從哪裏開始。

來源

2010-06-25 EpsilonVector

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>

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

來源

2010-06-25 20:19:16

簡單的解決方法是在視頻開始播放後添加CSS body{overflow:hidden;}刪除它。另外，你不能把視頻盒子放在一個div標籤中，並將其位置設置爲固定的？

來源

2010-07-05 04:05:54 qw3n

在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' 滾動的高度，而不僅僅是什麼畫面正在顯示。

來源

2013-04-23 12:22:42 Simon

當視頻盒子打開時防止滾動

回答

相關問題