Prevent scrolling when videobox is on_问答_开发者

开发者 https://www.devze.com 2023-01-04 23:20 出处：网络

I\'m using videobox to embed streams into my site, and I just discovered that when videobox is \"on\"- i.e. I clicked on a link that brings it up and dims everything around it- I can still scroll down

I'm using videobox to embed streams into my site, and I just discovered that when videobox is "on"- i.e. I clicked on a link that brings it up and dims everything around it- I can still scroll down and see the rest of my (non-dimmed) site. This breaks immersion, and I'd like to disable the scrolling, but on开发者_如何学Pythonly for when the videobox is on.

I have no idea where to start though.

You can't do this just with JavaScript, as far as I know, as the onscroll event is not cancelable.

You can achieve this by positioning everything in a container div with a height and width of 100% and disabling overflow on html and body elements, so you actually get the scrollbars on the container div. When your videobox is on, you can turn on an overlay that hides everything behind it (including the scrollbars on the container) and display the videobox on top of it.

<!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>

(You'll have to fiddle a bit with the positions of your elements, but you get the idea.)

The easy solution is to add the css body{overflow:hidden;} when the video starts playing and after that remove it. Also, can you not put the video box in a div tag and set its position to fixed?

in videobox.js

replace line 80

    this.overlay.setStyles({'top': window.getScrollTop()+'px', 'height': window.getHeight()+'px'});

with this:

this.overlay.setStyles({top:-$(window).getScroll().y,height:$(window).getScrollSize().y+$(window).getScroll().y});

Essentially this gets the height of the 'y' scroll and rather than just what the screen is showing.

Prevent scrolling when videobox is on

精彩评论

关注公众号

热门标签

图文推荐

Prevent scrolling when videobox is on

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：