为什么stackoverflow.com上的导航栏在点击时会跳转？

Question

stackoverflow上漂亮的新导航栏。 看起来像我正在使用的bootstrap。 它与我的网站有同样的问题，导航栏在点击时会略微跳跃。

任何想法如何解决它？ 我没有看得太近，但我认为应该有某种javascript修复来保持屏幕，直到它重新绘制。

Answer 1

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

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

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

处理这个问题的几种方法：

给出某些元素min-height属性，以便浏览器正确估计页面的初始高度（或至少更准确）。
在您确定具有滚动条的页面上给<body>一个最小高度的calc(100vh + 1px) 。
使用overflow:scroll在你知道会有滚动条的页面上overflow:scroll <body> （始终在媒体查询中包装它）
隐藏（如： opacity:0 ）所有在折叠内容之上并在加载特定元素时淡入（通常用于window加载事件，但如果页面很长，您可以使用特定的HTML元素）并且你不关心在绘制顶部时要加载的底部部分） - 这种技术被AngularJs网站/应用程序广泛使用，原则来自ng-cloak指令，但具有opacity 。 有效删除FOUC和此桌面滚动条跳转问题。
使用滚动条插件，删除默认滚动条。 自定义滚动条通常位于内容的绝对位置，不会影响内容呈现。
（这更像是一个黑客，但我使用它）：

@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;
 }
}

注意：此问题也称为模态叠加导航错误 ，因为当模态给出正文position:fixed以放置叠加层时，导航会跳到全宽（因为正文不再有滚动条）。 这是一个长期的讨论，有各种修复。 example 。

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

为什么stackoverflow.com上的导航栏在点击时会跳转？

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-02-18 00:45:34

为什么stackoverflow.com上的导航栏在点击时会跳转？

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-02-18 00:45:34

解决方案1
2 已采纳 2017-02-18 00:45:34