我遇到了一个有点古怪的行为。至少在我看来很古怪。
你可以在这里查看：https : //fiddle.jshell.net/mxmcd9Lw/8/show/
主要是当一个元素的高度改变时，它的父元素会自动滚动到顶部（你需要先向下滚动一点）。由于高度变化引起的重绘，偏移顶部似乎丢失了。
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; …