Javascript 为什么单击stackoverflow.com上的导航栏会跳转？

stackoverflow上漂亮的新导航栏。看起来像是我正在使用的引导程序。它的问题和我的网站一样，导航栏在点击时会有轻微的跳跃

有没有办法解决这个问题？我还没有看得太近，但我认为应该有某种javascript修复程序来保持屏幕直到它重新绘制。

导航栏跳转的原因是，在加载时，浏览器根据它拥有的关于内容的信息计算，它不需要滚动条。因此，它开始使用全视口宽度进行渲染。对于快速闪烁，在加载足够的页面使浏览器绘制滚动条之前，导航条为全宽

这意味着，在桌面浏览器中，它比带有滚动条的页面宽17px

注意：在尝试修复此问题之前，请注意这只是基于指针的宽设备上的问题。它不存在于移动/触摸设备上。使用媒体查询或设备检测，下面的任何方法都应限于桌面、基于指针的设备

处理此问题的几种方法：

• 指定某些元素

  min height

  属性，以便浏览器正确估计页面的初始高度（或至少更准确）
• 给
  一个最小高度

  calc（100vh+1px）

  在您确定会有滚动条的页面上
• 使用

  溢出：在
  上滚动
  ，在您知道会有滚动条的页面上滚动（始终在媒体查询中包装此项）

• 隐藏（如：

  opacity:0

  ）折叠内容上方的所有内容，并在加载特定元素时淡入（通常用于

  window

  load事件，但如果页面很长，并且在绘制顶部时不关心要加载的底部部分，则可以使用特定的HTML元素）-AngularJs网站/应用程序广泛使用该技术，原理来自

  ng-Clope

  指令，但具有

  不透明度

  。有效删除FOUC和此桌面滚动条跳转问题
• 使用滚动条插件，删除默认的滚动条。自定义滚动条通常绝对定位在内容上方，不会影响内容呈现

• （这更像是一种黑客行为，但我使用它）：

@media（最小宽度：$md-min）{/*768px*/
#navbar{/*假设这是navbar*/
位置：绝对位置；
左侧：0；顶部：0；/*取决于布局*/
最小宽度：100vw；
}
身体{
页边距顶部：60px；/*导航栏高度@桌面*/
溢出x：隐藏；
}
}

注意：这个问题也被称为模态叠加导航错误，因为当模态给出body

位置：fixed

以放置叠加时，导航跳转到全宽（因为body不再有滚动条）。这是一个长时间的讨论，有各种各样的修正

---

在我看来，这是桌面浏览器开发人员的过错。
边栏永远不应该干扰窗口宽度的计算。您可以在内容上绘制它（仅当用户滚动时？），也可以在没有滚动条的情况下，以一种看起来仍然不错的方式在页面旁边绘制它。

---

没那么难。

这个问题似乎还没有解决。Sorta觉得在Meta上可能会更好，所以作为一个bug报告。甚至可能得到如何修复你的网站的答案。当我点击它时，滚动条似乎消失了一会儿，导航条移动到了那个空间，然后滚动条回来，导航条也随之移动。这就是你所说的吗？点击最左边的SO图标。当屏幕重新加载时，导航栏将从左向右轻微跳跃，大约5个像素。该网站可能正在使用Javascript重新安排内容。这是在加载HTML后发生的，因此首先看到原始HTML，然后看到重新排列的显示。@Barmar我认为你是对的，但它看起来很愚蠢。JS可以修复吗？在这种情况下，标题总是显示为网站“模板”的一部分。这会改变或促进你的任何建议吗？你还会注意到导航栏（无论如何在这个站点上）是固定的，站点会在它下面滚动。这取决于用例。让我们谈谈你的网站，而不是SO，我可以提供一些方法。你能创建一个网站吗？好吧，一个例子需要一个网站，所以一个最小的完整的可验证的网站有点太多了。让我想一想。实际上，您可以创建一个

jsFiddle

，并在其中放入虚拟数据。慢慢来。至于解决方案，根据网站的不同，我会选择

position:absolute；最小宽度：100vw和
页边距顶部：{navbar height}；溢出x：隐藏在主体上。或者使用自定义滚动条插件。