当子元素高度发生变化时容器滚动到顶部

Question

我遇到了一些古怪的行为。至少在我看来这很古怪。

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

主要是当一个元素的高度发生变化时，它的父元素会自动滚动到顶部（你需要先向下滚动一点）。由于高度变化引起的重绘，似乎偏移顶部丢失了。

• 结构基于 CSS Grid
• 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/（方法二）

但没有运气。

我确信这与 body 不可滚动且主容器的高度设置为 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); 会以某种方式保持滚动位置，如您所料。我不知道为什么。

这是修改后的小提琴： https://fiddle.jshell.net/mxmcd9Lw/59/

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