Question

我正在尝试在JS中实现以下内容。在页面中，每次向上或向下滚动时，都必须显示视口中的以下div（部分）。例如，如果我向下滚动，页面必须自动向下移动到下一个div（部分），依此类推。当我向上滚动时也一样。每个div（部分）都有视口高度，以便每次向上或向下滚动时显示完整的div（部分）内容。是否有意义？任何人都可以建议它是否可以实现以及如何实现？

代码如下：

<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

就个人而言，我建议不要滚动窗格进入滚动视图，它们不一致且难以使用，特别是在诸如触控板或其他鼠标之类的东西上。加速滚动。

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

Answer 2

有许多滚动库可以解决这个问题，虽然你可以很容易地编写基本功能，但往往会有内置的转换bezier和滚动阈值等特权。

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

通常你会监控scroll event并在x像素在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
})

自动从一个部分向上或向下滚动

2 个答案: