Question

我目前正在寻找有关如何构建所有这些现代网络应用程序的帮助。它们似乎已经隐藏了溢出，并且仍然在各个方向滚动动画元素。

我喜欢并使用它的示例页面： http://www.contiducco.it/chi-siamo＆amp; 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>

create horizontal scrolling of the containers

隐藏溢出时滚动元素

1 个答案: