отключить прокрутку до завершения анимации

Question

У меня простая анимация, и я хочу отключить прокрутку на веб-сайте

до тех пор, пока эта анимация не будет завершена, она должна быть похожа на загрузчик в основном

ОБНОВЛЕНИЕ спасибо вас так много, но у меня проблема с этим, извините за то, что я не упомянул, потому что я использую фиксированное положение на контейнере, которое нужно зафиксировать для плавной прокрутки, поэтому, когда я использую фиксированное положение для любого элемента, это не кажется воткнуть в то же место вот полный код

html

    <main id="app">
     <div id="scroll-container" class="scroll-container">
      <div class="loader">
        <div class="loader__block"></div>
      </div>
     </div>
    </main>

CSS

    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;
        }

эти контейнеры имеют фиксированное положение и переполнение скрыто потому что я делаю плавный переход между страницами при прокрутке и перемещении позиции 'y', здесь также js, если это поможет

    function smoothScrolling() {
      const html = document.documentElement;
      const { body } = document;
      const scroller = {
        target: document.querySelector('#scroll-container'),
        ease: 0.06, // <= 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 > 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) < 0.05 || resized) {
          scroller.y = scrollY;
          scroller.scrollRequest = 0;
        }
        TweenLite.set(scroller.target, {
          y: -scroller.y,
        });
        requestId = scroller.scrollRequest > 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);
    }

Answer 1

Используйте правило CSS position: fixed; в своем div с классом loader, которое заставляет его всегда оставаться в одном и том же месте, даже если страница прокручивается. так:

.loader {
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: 999999;
    overflow: hidden;
    position: fixed;
}


.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;
    }
}
 

<main id="app">
  <div id="scroll-container" class="scroll-container">
       <div class="loader">
  <div class="loader__block"></div>
  </div>
</div>