隐藏溢出时滚动元素

Question

我目前正在寻求有关如何构建所有这些现代Web应用程序的帮助时间。 它们似乎已隐藏了溢出并且仍在各个方向上滚动显示动画元素。

我喜欢并使用它的示例页面： 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>

创建容器的水平滚动