滚动直到下一个子可见，Javascript 和 JQuery

Question

在我的应用程序中，我有大约 100 节诗。这些节中的每一个都大约占据一个视口高度。在侧面，我有两个按钮。一个应该向下滚动一个节，一个应该向上滚动一个节。

但是，用户也可以上下滚动文档，因此我不能依赖用户使用按钮按顺序运行节 ID。

我打算编写一个脚本来跟踪用户在任何给定时间点所在的节，然后编写另一个脚本来上升或下降一个节。

到目前为止，我已经编写了一个函数，它可以识别节何时位于屏幕中间，并记录用户所在的位置。由于所有搜索功能等都是动画的，因此运行良好。像这样工作：

$(document).ready(function() {
var stanzas = $('.stanza')
var currentStanza = 0;
var i = 1;

while ($(stanzas[i]).position().top < $(window).scrollTop() + quarterHeight) {
   currentStanza = i;
   i++; }
})

我打算将此功能与类似以下内容的功能结合使用：“滚动直到我迭代”，但我不知道该怎么做。你能找到滚动到下一节的方法吗？

当然，如果您有其他解决方案，我们也非常欢迎。

Answer 1

将 currentStanza 保存为元素，而不是数字，以便您可以执行以下操作：

function scrollToNext() {
  $(currentStanza).next()[0].scrollIntoView(scrollOptions)
}

但我认为这也可能有效，如果你想将 currentStanza 保持为 int：

function scrollToNext() {
  $(`.stanza:eq(${currentStanza})`).next()[0].scrollIntoView(scrollOptions)
}

scrollOptions 是定义滚动行为的对象，更多信息在这里：https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

但你可能想这样配置它：

var scrollOptions = {
  behavior: ‘smooth’,
  block: ‘center’
}