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

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

但运气不好。

我确定这与 body 不可滚动以及主容器的高度设置为 100vh.

有关

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

任何帮助将不胜感激。

谢谢！

卢卡斯

Answer 1

当 grid-area 设置为动态的东西并且溢出时，这似乎大多数时候都会发生 - 例如，如果您将 .l-page 设置为 grid-template-rows: repeat(4, auto) 错误仍然存在，但是在 grid-template-rows: repeat(4, 100px) 中不是。

我发现 work-around 在 Chrome 中有效。将 .l-page 设置为 grid-template-rows: auto auto auto minmax(1px, 1fr); 以某种方式保持滚动位置符合您的预期。虽然我不知道为什么。

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

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

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

container scrolls to top when children element height changes

html

css

scroll

css-grid