stackoverflow上的新导航栏。看起来像我正在使用的bootstrap。它与我的网站有同样的问题，导航栏在点击时会略微跳跃。
任何想法如何解决？我看起来并不太近，但我认为应该有一些javascript修复来保持屏幕直到它重新粉刷。
答案 0 :(得分：2)
导航栏跳转的原因是因为在加载时浏览器根据其有关内容的信息计算出它不需要滚动条。因此，它使用完整视口宽度开始渲染。对于快速闪存，在加载足够的页面以使浏览器绘制滚动条之前，导航栏是全角。
这意味着，在桌面浏览器中，它比使用滚动条的页面更宽17px。
注意：在尝试解决此问题之前，请注意这只是基于指针的广泛设备的问题。它在 移动/触摸设备 上不存在。下面的任何方法都应该使用媒体查询或设备检测来限制桌面设备，基于指针的设备。
处理此问题的几种方法：
min-height属性，以便浏览器正确估算页面的初始高度（或至少更准确）。<body>提供calc(100vh + 1px)的最小高度。overflow:scroll上使用<body>在您知道会有滚动条的页面上（始终将其包装在媒体查询中）opacity:0）所有以上内容，并在加载特定元素时将其淡入（通常用于window加载事件，但是可能只是使用一个特定的HTML元素，如果页面非常长并且您不关心在绘制顶部时要加载的底部部分） - 这种技术被AngularJs网站/应用程序广泛使用，原则来自{ {1}}指令，但ng-cloak。有效删除FOUC和此桌面滚动条跳转问题。使用滚动条插件，删除默认滚动条。自定义滚动条通常位于内容的绝对位置，不会影响内容呈现。
（这更像是一个黑客，但我使用它）：
opacity 注意：此问题也称为模态叠加导航错误，因为当模态给出正文@media (min-width: $md-min) { /* 768px ? */
#navbar { /* assuming this is navbar */
position:absolute;
left: 0; top: 0; /* depends on layout */
min-width: 100vw;
}
body {
margin-top: 60px; /* navbar height @desktop */
overflow-x: hidden;
}
}
以放置叠加层时，导航跳到全宽（因为身体不再有滚动条）。这是一个长期的讨论，有各种修复。 example
从我的角度来看，这是桌面浏览器开发者的错误
侧边栏永远不应该干扰窗口宽度计算。你可以在内容上绘制它（仅当用户滚动时？）或者在没有滚动条的情况下以一种看起来很好的方式将它绘制在页面旁边。
这并不难。