title: Disable scrolling on logo overlay
body: <p>I am looking to disable the scrolling on the overlay. The way this overlay is acting is to display a flashing logo before the users can actually display the website. But, I want scrolling disabled. Please take a look at my code to determine the error. I am looking to disable the scrolling on the overlay. The way this overlay is acting is to display a flashing logo before the users can actually display the website. But, I want scrolling disabled. Please take a look at my code to determine the error.   </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
          &lt;link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet"&gt;
          &lt;link rel="stylesheet" href="animate.css"&gt;
          &lt;link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet"&gt;
          &lt;link href="https://fonts.googleapis.com/css?family=Lato:200,300,400,700,900" rel="stylesheet"&gt;
          &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900" rel="stylesheet"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet"&gt;
  
      &lt;style&gt;
     #overlay {
    position: absolute;
    display: none;
    background: dodgerblue;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    padding: 0;
    margin: 0;
  }
  
  
  html,
  body {
    margin: 0;
    padding: 0;
    background-color: black;
  
  
  }
  
  * {
    margin: 0; 
    padding: 0;
    font-family: 'Lato', sans-serif;
    color: white;
  
  }
  
  
      &lt;/style&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;//$( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
  
              $(document).ready(function() {
                $('#overlay').fadeIn('fast').delay(4500).fadeOut('fast');
              });&lt;/script&gt;
  
          &lt;script&gt;
  
          $(document).ready(function() {
                $('#navbar').fadeIn('fast').delay(4500)
              });
  
          &lt;/script&gt;
  
  &lt;body&gt;
  
  
  
      &lt;div class="animated slideOutDown" id="overlay" style="overflow: hidden; text-align: center; animation-delay: 3s; animation-duration: 2.5s;padding-top: 80px; background-color: #181818;"&gt;&lt;img class="animated flash" style="height: 350px; animation-delay: 1s; animation-duration: 1.5s;" alt="logo"&gt;&lt;/img&gt;&lt;/div&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>