渲染新容器后，滚动到页面底部答案

【问题标题】：Scroll to the bottom of the page, after the new container is rendered渲染新容器后，滚动到页面底部
【发布时间】：2019-07-01 14:18:26
【问题描述】：

所以，直截了当.. 我有2 containers 和100vh，但是当您单击第一个容器中的按钮时，会呈现第二个容器。按钮点击事件函数也有这一行：window.scrollTo(0,document.body.scrollHeight); 这让我滚动底部.. 现在的问题是点击时，我从 api 获取信息，这需要一点时间，因为 javascript 是 @987654324 @，即使我将滚动函数放在函数的底部，滚动函数也会在等待加载信息和渲染第二个容器之前自行执行。谁能告诉我如何解决这个问题？

编辑：所以这里有一些额外的信息。第二个容器的显示取决于一个布尔变量。在回调函数中，我将该值设置为 true。

我是这样做的：

.then(res => {
    res.forEach(data => {
        ...
    }

    if (Object.keys(res).lenght > 1) {
        this.isTrack = false
        this.displayTracks = true   <!-- Second's container bool variable -->
        window.scrollTo({top: 5000, behavior: 'smooth'});
    }
})

【问题讨论】：

标签： javascript html css vue.js

【解决方案1】：

正如您所说，由于 javascript 是异步的，您必须等待事件完成。这个过程一般由javascript中的callback functions处理。回调函数是在async 调用返回时调用的函数。您可以在回调函数中向下滚动到页面的最底部，这样您就不必担心同步它们。

【讨论】：

是的，我想过，但如果我这样做会有一个问题。正如我所说，我使用 Vue.js 框架。现在，根据布尔变量显示第二个容器。调用 api 时，该值会更改并显示第二个容器。所以，我认为这会影响这种做法。
那么，你也应该等待第二个容器的渲染事件，最后做你想做的事情。
是的，我知道 .. 但我究竟要如何等待第二个容器的渲染？

【解决方案2】：

一种解决方案是在 API 请求的回调中触发 scrollTo，或者使用 async/await 等待请求完成然后触发滚动。

在 API 请求的回调中触发它，可能如下所示：

fetch('someUrl')
   .then(() => {
     window.scrollTo(0,document.body.scrollHeight)
   });

【讨论】：

事情发生了一些变化，现在我在上面添加了更多信息。如何等待容器显示，然后滚动？