settimeout - 页面延迟后 Div 内容发生变化

我有一个由 Express 提供的 html 文件，它还从 api 获取数据。当我单击导航栏中的链接并切换路线（或重新加载页面）时，顶部导航栏向右移动，然后向左移动，我不知道如何修复它。

如果您查看 JSFiddle（下面的链接），您会注意到我有指向其他页面的链接，例如/profile、/about等。每次加载这些页面之一时，导航栏都会移动（它正在调整垂直滚动条消失，然后再次出现）。

为了模仿 api 调用，我添加了一个setTimeout. 要重现该问题并查看我在说什么，您可能需要在您的计算机上本地运行此代码，然后刷新页面。

奇怪的是，这个问题只发生在有某种延迟时（比如 api 调用，或setTimeout）。如果我消除延迟并立即加载内容，一切正常。

一些css代码被注释掉了。我稍后要添加的唯一关键元素是position: fixed将导航栏固定到页面顶部。

如何防止导航栏四处移动？

标签： settimeoutinnerhtml

浏览器首先呈现没有滚动条的页面，因为它根本不需要。然后你动态地将几个长段落添加到 DOM 中，这使得滚动条出现。这就是导致您的内容“转移”的原因。

滚动条加起来是页面的宽度。为了防止它这样做，你需要这样做：

html{
    overflow-y: scroll;
}