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

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/（方法 2）

但没有运气。

我确信这与 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 中，该错误似乎已修复 - 您的示例在那里运行良好。所以我认为这是一个已知的错误，很快就会被浏览器解决。