javascript - 自动从一个部分向上或向下滚动到另一个部分

Question

我正尝试在 JS 中实现如下内容。 在页面中，每次向上或向下滚动时，都必须显示视口(viewport)中的以下 div(部分)。 例如，如果我向下滚动，页面必须自动向下移动到下一个 div(部分)等等。当我向上滚动时也是如此。 每个 div(section) 都有视口(viewport)高度，以便在我每次向上或向下滚动时显示完整的 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>

谢谢!

Answer 1

就个人而言，我建议不要将 Pane 滚动到 ScrollView 中，它们不一致且使用起来很笨拙，尤其是在触控板或其他加速滚动的“鼠标”之类的东西上。

但是，一次滚动一个视口(viewport)的 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;
});