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

Question

在我的申请中，我有一首诗大约有 100 节。这些节中的每一个都大约占据一个 view-port 高度。在侧面，我有两个按钮。一个应该向下滚动一节，一个应该向上滚动一节。

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

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

到目前为止，我已经编写了一个函数，该函数可以识别节何时位于屏幕中间，以及用户位于何处的日志。由于所有搜索功能等都是动画的，因此工作正常。像这样工作：

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

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

我打算将此功能与类似以下内容的功能结合使用："Scroll until i iterates"，但我不知道该怎么做。你能想出一种滚动到下一节的方法吗？

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

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’
}

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

Scroll until next child visible, Javascript and JQuery

javascript

jquery

scroll

custom-scrolling