javascript - 隐藏溢出时的滚动元素

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>

创建容器的水平滚动