CSS/JavaScript - 用户开始滚动时的滚动捕捉

Question

我最近发现this website 使用滚动捕捉。我调查了一下，发现CSS supports this。但是，看起来在用户停止滚动后会发生捕捉。这同样适用于answer to this question。

接下来我尝试使用window.scrollTo 和react-scroll，但这两者都没有我作为示例链接的网站那么流畅，因为用户仍然可以通过滚动来“对抗”滚动另一个方向。

我希望它在用户开始滚动时滚动。如何使用 CSS 或 JavaScript 做到这一点？

Answer 1

如果你想精确地模拟它，你正在查看的开发人员正在使用这个 js 脚本https://alvarotrigo.com/fullPage/

Answer 2

如果 jQuery 是一个选项，那将是具有最佳浏览器兼容性的最简单的解决方案。您可以使用“wheel”事件侦听器来检测滚动的方向，然后使用 jQuery animate 将窗口滚动到相应的元素。我提供了一个基于此 GitHub 存储库的示例：https://github.com/epranka/sections-slider。

(function($) {
  var selector = ".section";
  var direction;
  var $slide;
  var offsetTop;
  var $slides = $(selector);
  var currentSlide = 0;
  var isAnimating = false;

  var stopAnimation = function() {
    setTimeout(function() {
      isAnimating = false;
    }, 300);
  };

  var bottomIsReached = function($elem) {
    var rect = $elem[0].getBoundingClientRect();
    return rect.bottom <= $(window).height();
  };

  var topIsReached = function($elem) {
    var rect = $elem[0].getBoundingClientRect();
    return rect.top >= 0;
  };

  document.addEventListener(
    "wheel",
    function(event) {
      var $currentSlide = $($slides[currentSlide]);

      if (isAnimating) {
        event.preventDefault();
        return;
      }

      direction = -event.deltaY;

      if (direction < 0) {
        // next
        if (currentSlide + 1 >= $slides.length) {
          return;
        }
        if (!bottomIsReached($currentSlide)) {
          return;
        }
        event.preventDefault();
        currentSlide++;
        $slide = $($slides[currentSlide]);
        offsetTop = $slide.offset().top;
        isAnimating = true;
        $("html, body").animate({
            scrollTop: offsetTop
          },
          1000,
          stopAnimation
        );
      } else {
        // back
        if (currentSlide - 1 < 0) {
          return;
        }
        if (!topIsReached($currentSlide)) {
          return;
        }
        event.preventDefault();
        currentSlide--;
        $slide = $($slides[currentSlide]);
        offsetTop = $slide.offset().top;
        isAnimating = true;
        $("html, body").animate({
            scrollTop: offsetTop
          },
          1000,
          stopAnimation
        );
      }
    }, {
      passive: false
    }
  );
})(jQuery);

.section {
  position: relative;
  display: flex;
  height: 100vh;
}

#section1 {
  background: blue;
}

#section2 {
  background: #ff8c42;
}

#section3 {
  background: #6699cc;
}

#section4 {
  background: #00b9ae;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="section1" class="section"></div>
<div id="section2" class="section"></div>
<div id="section3" class="section"></div>
<div id="section4" class="section"></div>