All geek questions in one place

Prevent scrolling while video ad is on

I use video objects to embed streams on my website, and I just found that when the video object is “on” - that is, I clicked on the link that lifts it and dims around it - I can still scroll down and see the rest of mine ( non-fading) site. This destroys the dive, and I would like to turn off scrolling, but only when the video is on.

I don’t know where to start.

+3
source share
3 answers

You cannot do this using JavaScript only, as far as I know, since the event has onscroll not been canceled .

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

( , .)

+1

- css body{overflow:hidden;}, , . , div ?

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
source

Source: https://habr.com/ru/post/1751803/

More articles:


All Articles