我遇到了一些奇怪的行为。至少我觉得很奇怪。
您可以在这里查看: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 上会跳转到底部。
任何帮助将不胜感激。
谢谢!
卢卡斯
最佳答案
当网格区域设置为动态且有溢出时,这种情况似乎大多数时候都会发生 - 例如,如果您将 .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 中,该错误似乎已得到修复 - 您的示例在那里运行良好。所以我认为这是一个已知的错误,浏览器很快就会解决。
关于html - 当子元素高度改变时容器滚动到顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49558290/