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，erm会触发 loadMore 逻辑。我在上面的代码中包含了两个版本，一个是基于promise的，注释一个是基于回调的。当它加载更多并将其放在屏幕上时，它应该回调你的函数（scrollToBottom）。你如何做到这一点，取决于你使用什么，可能是另一个问题。

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

Answer 2

<@> @Zlatko答案是最好的表现。但是，您可以在每个上下文中使用此选项：

window.addEventListener( 'resize', function(){
    window.scrollTo(0,document.body.scrollHeight);
});

Answer 3

听起来像您需要到达页面底部，等待加载并再次滚动到底部。您无法到达页面的结尾，而无法知道结尾。

function scroll_and_wait(){
  return new Promise(
    function(resolve, reject){
    setTimeout(function(){
    resolve(window.scrollTo(0,document.body.scrollHeight));
    }, 500);})}

 async function scroller(n){while(n>0){await scroll_and_wait();n=n-1;}}

 scroller(5)

调用scroller函数将滚动到页面底部多次，直到您指定了500ms的加载暂停时间。

滚动到更改高度的页面底部

3 个答案: