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底部。

任何帮助都将受到高度赞赏。

THX！

的Lukas

Answer 1

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

我找到了适用于Chrome的解决方法。将grid-template-rows: repeat(4, 100px)设置为.l-page会以某种方式保持滚动位置，如您所料。我不知道为什么。

这里有修改过的小提琴： https://fiddle.jshell.net/mxmcd9Lw/59/

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

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

1 个答案: