Элементы прокрутки, когда переполнение скрыто

Question

В настоящее время я часами слежу за тем, как создаются все эти современные веб-приложения. Кажется, что при прокрутке во всех направлениях у них переполнены скрытые и все еще анимированные элементы.

Примеры страниц, которые мне понравились, и используйте их: http://www.contiducco.it/chi-siamo & https://theshift.tokyo/

Я пытался построить что-то вроде этого, используя:

 componentDidMount() {
    var scrollDepth = 0;
    $(window).bind("mousewheel DOMMouseScroll", function(event) {
      if (
        event.originalEvent.wheelDelta < 0 ||
        event.originalEvent.detail > 0
      ) {
        var onScrollDown = setTimeout(function() {
          scrollDepth = scrollDepth + 1;
          this.onScrollDown;
        }, 10);
      } else {
        var onScrollUp = setTimeout(function() {
          scrollDepth = scrollDepth - 1;
          this.onScrollUp;
          console.log(scrollDepth);
        }, 10);
      }
    });

Но я думаю, что вычисление scrollDepth несколько раз в секунду очень плохо для частоты кадров.

Существует ли библиотека или более простой / более эффективный способ перемещения элементов путем прокрутки без использования полосы прокрутки?

Спасибо за вашу помощь

Answer 1

Вы должны создать горизонтальную прокрутку контейнеров, вы можете увидеть это в руководстве:

<a href="https://codepen.io/colinlord/post/horizontal-scrolling-containers">Copy paste the link in a </a>

создание горизонтальной прокрутки контейнеров