javascript - 滚动到改变高度的页面底部

Question

我想用JS滚动到网页底部，网上看，大多数人说用

window.scrollTo(0,document.body.scrollHeight);

但是，当您到达底部时，我要向下滚动的页面会改变其高度(它会不断加载越来越多的页面)，因此其高度不固定。最终的高度也会变化(因此我不能只滚动到页面的最终高度)所以我需要某种滚动方式直到它确定它已经到达底部(它不能再滚动了)。

Answer 1

如果您有无限滚动，您实际上需要将其纳入您的设计中。例如。 scrollToBottom 应该是这样的:

function scrollToBottom(lastOffset) {
  const offset = document.body.scrollHeight;
  // check if no more scrolling required.
  if (lastOffset === offset)  {
    return;
  }
  // if it is, go to bottom.
  window.scrollTo(0, offset);
  // Now, trigger your `loadMore` logic, whatever it might be, then call scrollToBottom again.
  triggerLoadMore().then(() => scrollToBottom(offset));
  // or triggerLoadMore(() => scrollToBottom(offset));
}

// call this somewhere after your initial load.

现在，triggerLoadMore，呃，触发您的loadMore 逻辑。我在上面的代码中包括了两个版本，一个是基于 promise 的，一个是基于回调的注释。当它加载更多并将其放在屏幕上时，它应该回调您的函数(scrollToBottom)。你如何做到这一点取决于你使用什么，这可能是另一个问题。

现在，这里有第三个选项，您的触发器是您不能直接调用的东西，因为它与 window.scroll 事件或某些此类逻辑相关联。在这种情况下，您需要在此类函数流的末尾编写这一点逻辑 - 加载更多、在屏幕上呈现、滚动。然后再次触发循环。