自动从一个部分向上或向下滚动到另一个部分答案

【问题标题】：Scrolling up or down from section to section automatically自动从一个部分向上或向下滚动到另一个部分
【发布时间】：2016-10-19 09:54:49
【问题描述】：

我正在尝试在 JS 中实现如下所示的内容。在页面中，每次向上或向下滚动时，都必须显示视口中的以下 div(section)。例如，如果我向下滚动，页面必须自动向下移动到下一个 div(section) 等等。当我向上滚动时也是如此。每个 div(section) 都有视口高度，以便在我每次向上或向下滚动时显示完整的 div(section) 内容。是否有意义？谁能建议它是否可以实现以及如何实现？

代码可能如下：

<div class"container">
<div class="section"> content </div> <!-- viewport height -->
<div class="section"> content </div> <!-- viewport height -->
<div class="section"> content </div> <!-- viewport height -->
<div class="section"> content </div> <!-- viewport height -->
<div class="section"> content </div> <!-- viewport height -->
</div>

谢谢！

【问题讨论】：

标签： javascript jquery html css parallax

【解决方案1】：

就我个人而言，我建议不要将窗格滚动到滚动视图中，因为它们不一致且难以使用，尤其是在诸如触控板或其他具有加速滚动功能的“鼠标”之类的东西上。

但是，一次滚动一个视口的 jQuery 解决方案可能如下所示：

var lastScrollTop = 0;
$(window).scroll(function(event){
  var scrollTop = $(this).scrollTop();
  if (scrollTop > lastScrollTop){
    $("html,body").animate({
      scrollTop: $("html,body").css("scrollTop") + $(".section").first().height()
    }, 500);
  } else {
    $("html,body").animate({
      scrollTop: $("html,body").css("scrollTop") - $(".section").first().height()
    }, 500);
  }
  lastScrollTop = scrollTop;
});

【讨论】：

我已经尝试过您的示例，但页面仍然卡在位置而没有滚动

【解决方案2】：

有许多滚动库可以解决这个问题，虽然您可以很容易地编写基本功能，但往往会有一些额外的好处，例如内置的过渡贝塞尔曲线和滚动阈值。

如果您希望手动执行此操作，您需要将element.scrollTop 值与window.pageYOffset 进行比较，并使用window.scrollY() 重新定位页面。

通常，您将监视scroll event，并在 x 像素在 y 秒内滚动（确保去抖动）后，滚动 Y 到下一个 div 或返回到当前 div，以便保持边缘捕捉。

一个粗略的想法是：

window.addEventListener('scroll', e => {
  // set/debounce timer
  // check scroll direction
  // check if pageYOffset is > or < than current section scrollTop
  // scrollY to current, next, or previous section
})

【讨论】：