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

Question

我最近发现了这个使用滚动捕捉的网站。我研究了一下，发现CSS 支持这个。但是，看起来在用户停止滚动后会发生捕捉。这同样适用于这个问题的答案。

我尝试的下一件事是使用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($) {&nbsp; var selector = ".section";&nbsp; var direction;&nbsp; var $slide;&nbsp; var offsetTop;&nbsp; var $slides = $(selector);&nbsp; var currentSlide = 0;&nbsp; var isAnimating = false;&nbsp; var stopAnimation = function() {&nbsp; &nbsp; setTimeout(function() {&nbsp; &nbsp; &nbsp; isAnimating = false;&nbsp; &nbsp; }, 300);&nbsp; };&nbsp; var bottomIsReached = function($elem) {&nbsp; &nbsp; var rect = $elem[0].getBoundingClientRect();&nbsp; &nbsp; return rect.bottom <= $(window).height();&nbsp; };&nbsp; var topIsReached = function($elem) {&nbsp; &nbsp; var rect = $elem[0].getBoundingClientRect();&nbsp; &nbsp; return rect.top >= 0;&nbsp; };&nbsp; document.addEventListener(&nbsp; &nbsp; "wheel",&nbsp; &nbsp; function(event) {&nbsp; &nbsp; &nbsp; var $currentSlide = $($slides[currentSlide]);&nbsp; &nbsp; &nbsp; if (isAnimating) {&nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; direction = -event.deltaY;&nbsp; &nbsp; &nbsp; if (direction < 0) {&nbsp; &nbsp; &nbsp; &nbsp; // next&nbsp; &nbsp; &nbsp; &nbsp; if (currentSlide + 1 >= $slides.length) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if (!bottomIsReached($currentSlide)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; currentSlide++;&nbsp; &nbsp; &nbsp; &nbsp; $slide = $($slides[currentSlide]);&nbsp; &nbsp; &nbsp; &nbsp; offsetTop = $slide.offset().top;&nbsp; &nbsp; &nbsp; &nbsp; isAnimating = true;&nbsp; &nbsp; &nbsp; &nbsp; $("html, body").animate({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scrollTop: offsetTop&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 1000,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stopAnimation&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; // back&nbsp; &nbsp; &nbsp; &nbsp; if (currentSlide - 1 < 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if (!topIsReached($currentSlide)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; currentSlide--;&nbsp; &nbsp; &nbsp; &nbsp; $slide = $($slides[currentSlide]);&nbsp; &nbsp; &nbsp; &nbsp; offsetTop = $slide.offset().top;&nbsp; &nbsp; &nbsp; &nbsp; isAnimating = true;&nbsp; &nbsp; &nbsp; &nbsp; $("html, body").animate({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scrollTop: offsetTop&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 1000,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stopAnimation&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; passive: false&nbsp; &nbsp; }&nbsp; );})(jQuery);.section {&nbsp; position: relative;&nbsp; display: flex;&nbsp; height: 100vh;}#section1 {&nbsp; background: blue;}#section2 {&nbsp; background: #ff8c42;}#section3 {&nbsp; background: #6699cc;}#section4 {&nbsp; 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>