stackoverflow 上的新导航栏不错。看起来像我正在使用的 Bootstrap 。它和我的网站有同样的问题，点击时导航栏会轻微跳动。
有什么解决办法吗？我没有仔细看，但我认为应该有某种 javascript 修复程序来保持屏幕直到它重新绘制。
最佳答案
导航栏跳跃的原因是因为在加载时浏览器根据它所拥有的关于内容的信息计算它不需要滚动条。因此它开始使用全视口(viewport)宽度进行渲染。对于快速闪现，在加载足够多的页面以使浏览器绘制滚动条之前，导航栏是全宽。
这意味着，在桌面浏览器中，它是 17px比带滚动条的页面更宽。
注意:在尝试解决此问题之前，请注意这只是宽屏、基于指针的设备上的问题。它在移动/触摸设备 上不存在。下面的任何方法都应该限制在桌面、基于指针的设备上，使用媒体查询或设备检测。
一些处理方法:
- 给出某些元素
min-height属性，以便浏览器正确估计页面的初始高度(或至少更准确)。 - 给
<body>最小高度为calc(100vh + 1px)在您确定会有滚动条的页面上。 - 使用
overflow:scroll在<body>在您知道的页面上会有滚动条(始终将其包装在媒体查询中) - 隐藏(如:
opacity:0)所有首屏内容，并在加载特定元素时淡入(通常用于window加载事件，但您可以只使用特定的 HTML 元素，如果页面很长并且您不关心在绘制顶部时要加载的底部部分)- AngularJs 网站/应用程序广泛使用此技术，原理来自ng-cloak指令，但带有opacity.有效消除 FOUC 和此桌面滚动条跳转问题。 使用滚动条插件，删除默认滚动条。自定义滚动条通常绝对定位在内容之上，并且不会影响内容呈现。
(这更像是 hack，但我使用它):
@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;
}
}
注意:此问题也称为模态叠加导航错误，因为当模态给 body position:fixed 时为了放置叠加层，导航跳到全宽(因为正文不再有滚动条)。这是一个漫长的讨论，有各种修复。 example .
在我看来，这是桌面浏览器开发人员的错。
侧边栏永远不应该干扰窗口宽度的计算。您要么在内容上绘制它(仅当用户滚动时？)，要么以在没有滚动条时仍然看起来不错的方式将其绘制在页面旁边。
没那么难。
关于javascript - 为什么单击时 stackoverflow.com 上的导航栏会跳转？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42309557/