html - 当子元素高度改变时容器滚动到顶部

Question

我遇到了一些奇怪的行为。至少我觉得很奇怪。

您可以在这里查看:https://fiddle.jshell.net/mxmcd9Lw/8/show/

主要是当元素的高度发生变化时，其父元素会自动滚动到顶部(您需要先向下滚动一点)。由于高度变化导致的重新绘制，顶部偏移似乎丢失了。

• 结构基于 CSS 网格
• body 溢出设置为隐藏
• 主容器.l-page设置为100vh
• 滚动容器.l-content

 body {
  overflow-y: hidden;
}

.l-page {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas: 'primary_bar primary_bar' 'sidebar notification' 'sidebar secondary_bar' 'sidebar content';
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
  min-width: 1280px;
  max-width: 1920px;
}

.l-notification {
  grid-area: notification;
}

.l-primary-bar {
  grid-area: primary_bar;
  z-index: 2;
}

.l-secondary-bar {
  grid-area: secondary_bar;
  z-index: 1;
}

.l-sidebar {
  grid-area: sidebar;
  width: 180px;
}

.l-content {
  grid-area: content;
  overflow-x: hidden;
  z-index: 0;
}

我尝试过:

• 将 html 和 body 设置为溢出隐藏
• 在不同配置中将 html 和 body height、min-height 设置为 100%
• https://abdus.co/blog/preventing-vh-jump-on-mobile-browsers/ (方法二)

但运气不佳。

我确信这与主体不可滚动并且主容器的高度设置为100vh有关。

注意在 Chrome 上它会跳转到最顶部，在 FF 和 Safari 上会跳转到底部。

任何帮助将不胜感激。

谢谢!

卢卡斯

Answer 1

当网格区域设置为动态且有溢出时，这种情况似乎大多数时候都会发生 - 例如，如果您将 .l-page 设置为 grid-template-rows:repeat (4, auto) 该错误仍然存​​在，但在 grid-template-rows: Repeat(4, 100px) 中则不再存在。

我找到了一种适用于 Chrome 的解决方法。将 .l-page 设置为 grid-template-rows: auto auto auto minmax(1px, 1fr); 以某种方式保持滚动位置如您所愿。但我不知道为什么。

这是修改后的 fiddle : https://fiddle.jshell.net/mxmcd9Lw/59/

此外，值得注意的是，在 Firefox Developer Edition v60 中，该错误似乎已得到修复 - 您的示例在那里运行良好。所以我认为这是一个已知的错误，浏览器很快就会解决。