I wonder if it is possible to remove/hide the scroll while the blue div (id="load") is showing (2 seconds). If the answer is yes, how can I make that?

I have tried to use overflow-x:hidden in the blue div (load) and it doesn't work.

The reason why I need to make that is because I have behind this blue div the full website and I don't want people scroll down while the loading screen (blue div) is showing, because they will appear in the midel of the website when the loading screen disappear (after 2 seconds).

```js
document.onreadystatechange = function() {
  var state = document.readyState
  if (state == 'complete') {
    setTimeout(function() {
      document.getElementById('interactive');
      document.getElementById('load').style.visibility = "hidden";
    }, 2500);
  }
}
```

```css
#load {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 2000;
  background-color: #29d4e6;
  top: 0;
  -webkit-animation-delay: 2.3s;
  -moz-animation-delay: 2.3s;
  -o-animation-delay: 2.3s;
  animation-delay: 2.3s;
}
```

```html
<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
</head>

<body>
  <div class="animated fadeOut" id="load">Loading........</div>
  <div style="height:2000px"> Hello there! full website </div>
</body>

</html>
```