时间戳

首页 > 解决方案 > 滚动直到下一个子可见，Javascript 和 JQuery

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

问题描述

在我的申请中，我有大约 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++; }
})

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

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

标签： javascriptjqueryscrollcustom-scrolling

解决方案

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

推荐阅读