videobox가 켜져있을 때 스크롤을 방지합니다.

비디오 사이트를 스트림에 포함시키기 위해 비디오 보텍을 사용하고 있습니다. 비디오 보스터가 "켜기"일 때 - 즉 링크를 클릭하여 주변의 모든 것을 희미하게합니다. 여전히 아래로 스크롤하여 나머지 (희미하지 않은) 사이트를 볼 수 있습니다. 이것은 침수를 깨고, 나는 스크롤을 해제하고 싶습니다만, 비디오 박스가 켜져있을 때만 가능합니다.videobox가 켜져있을 때 스크롤을 방지합니다.

어디서부터 시작해야할지 모르겠습니다.

출처

2010-06-25 EpsilonVector

http://stackoverflow.com/questions/422028/how-to-disable-scrollbars-with-javascript – huntaub

예 고정 된 위치 대 절대 위치를 가지고 놀았지만 작동하지 않습니다. videobox css에서 그것을 변경하면 비디오 박스가 손상되고 내 사이트를 지속적으로 스크롤 할 수 없게 만들고 싶지 않습니다. – EpsilonVector

onscroll 이벤트가 not cancelable이므로 JavaScript로는이 작업을 수행 할 수 없습니다.

당신은 height 및 100%의 width과 용기 div에서 모든 위치 및 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

videobox가 켜져있을 때 스크롤을 방지합니다.

답변

관련 문제