title: disable scrolling untill animation is done
body: <p>I have a simple animation and I want to disable scrolling on the website</p>
  
  <p>until this animation is done, it should be like a loader basically </p>
  
  <p><strong>UPDATE</strong>
  thank you so much, but I have an issue with that sorry for not mention because I'm using a fixed position on a container to be fixed to do smooth scrolling, so when I use 'fixed' position for any element it doesn't seem to stick in the same place here is the full code </p>
  
  <p>html</p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;main id="app"&gt;
       &lt;div id="scroll-container" class="scroll-container"&gt;
        &lt;div class="loader"&gt;
          &lt;div class="loader__block"&gt;&lt;/div&gt;
        &lt;/div&gt;
       &lt;/div&gt;
      &lt;/main&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre class="lang-css prettyprint-override"><code>    body {
       overflow-x: hidden;
       overflow-y: scroll;
       background: $bg-color;
       user-select: none;
       font-family: 'Platform Regular';
      }
  
      #app {
       overflow: hidden;
       position: fixed;
       height: 100vh;
       width: 100vw;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
      }
  
  
      .scroll-container {  
        position: absolute;  
        overflow: hidden;
        z-index: 10;
        display: flex;
        justify-content: center;  
        backface-visibility: hidden;
      } 
  
  
  
      .loader {
          width: 100vw;
          height: 100vh;
          position: absolute;
          z-index: 999999;
          overflow: hidden;
      }
  
  
      .loader__block {
          position: absolute;
          width: 0%;
          height: 100vh;
          background: #111111;
          animation: go-left 4s cubic-bezier(.74, .06, .4, .92) forwards;
      }
  
      @keyframes go-left {
          0% {
              left: 0;
              width: 0%;
          }
          50% {
              left: 0;
              width: 100%;
          }
          100% {
              left: 100%;
              width: 0;
          }
  </code></pre>
  
  <p>these containers have a fixed position and overflow hidden because I'm making smooth page transition while scrolling and moving the 'y' position
  here is also the js if it's going to help</p>
  
  <pre class="lang-js prettyprint-override"><code>    function smoothScrolling() {
        const html = document.documentElement;
        const { body } = document;
        const scroller = {
          target: document.querySelector('#scroll-container'),
          ease: 0.06, // &lt;= scroll speed
          endY: 0,
          y: 0,
          resizeRequest: 1,
          scrollRequest: 0,
        };
        let requestId = null;
        TweenLite.set(scroller.target, {
          rotation: 0.01,
          force3D: true,
        });
        function updateScroller() {
          const resized = scroller.resizeRequest &gt; 0;
          if (resized) {
            const height = scroller.target.clientHeight;
            body.style.height = `${height}px`;
            scroller.resizeRequest = 0;
          }
          const scrollY = window.pageYOffset || html.scrollTop || body.scrollTop || 0;
  
          scroller.endY = scrollY;
          scroller.y += (scrollY - scroller.y) * scroller.ease;
  
          if (Math.abs(scrollY - scroller.y) &lt; 0.05 || resized) {
            scroller.y = scrollY;
            scroller.scrollRequest = 0;
          }
          TweenLite.set(scroller.target, {
            y: -scroller.y,
          });
          requestId = scroller.scrollRequest &gt; 0 ? requestAnimationFrame(updateScroller) : null;
        }
        function onScroll() {
          scroller.scrollRequest += 1;
          if (!requestId) {
            requestId = requestAnimationFrame(updateScroller);
          }
        }
        function onResize() {
          scroller.resizeRequest += 1;
          if (!requestId) {
            requestId = requestAnimationFrame(updateScroller);
          }
        }
        function onLoad() {
          updateScroller();
          window.focus();
          window.addEventListener('resize', onResize);
          document.addEventListener('scroll', onScroll);
        }
        window.addEventListener('load', onLoad);
      }
  </code></pre>