子元素高度更改时，容器滚动到顶部 [英] container scrolls to top when children element height changes

问题描述

我遇到了一些古怪的行为.至少在我看来这很古怪.

I came across a bit quirky behavior. At least it seems quirky to me.

您可以在此处查看: https://fiddle.jshell.net/mxmcd9Lw/8/show/

主要是当元素的高度更改时，其父元素自动滚动到顶部(您需要先向下滚动一点).似乎是由于高度变化导致的重新绘制而丢失了偏移顶部.

Mainly when a element's height changes its parent element scrolls automatically to the top (you need to scroll down a bit first). Seems like offset top is lost because of the repaint that is caused by a height change.

• 结构基于CSS网格
• body溢出设置为隐藏
• 主容器.l-page设置为100vh
• 滚动式容器.l-content

• structure is based on CSS Grid
• body overflow is set to hidden
• main container .l-page is set to 100vh
• scrolled container .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浏览器/(方法2)

• setting both html and body to overflow hidden
• setting both html and body height, min-height to 100% in different configuration
• https://abdus.co/blog/preventing-vh-jump-on-mobile-browsers/ (method 2)

但没有运气.

我确信这与主体不可滚动且主容器的高度设置为100vh有关.

I am sure it has something to do with the fact that body is not scrollable and that main container's height is set to 100vh.

注意:在Chrome上，它跳到顶部，在FF和Safari上跳到底部.

Note On Chrome it jumps to the very top, on FF and Safari to the bottom.

我们将不胜感激任何帮助.

Any help will be highly appreciated.

谢谢！

卢卡斯

推荐答案

当网格区域设置为动态区域并发生溢出时，这似乎大多数情况下发生-例如，如果将.l-page设置为grid-template-rows: repeat(4, auto)错误仍然存​​在，但在grid-template-rows: repeat(4, 100px)中没有.

This seems to happen most times when the grid-area is set to something dynamic and has overflow - for example if you set .l-page to grid-template-rows: repeat(4, auto) the bug is still present, but in grid-template-rows: repeat(4, 100px) it is not.

我找到了一种可在Chrome中使用的变通方法.将.l-page设置为grid-template-rows: auto auto auto minmax(1px, 1fr);可以使滚动位置保持预期的状态.我也不知道为什么.

I have found a work-around that works in Chrome. Setting .l-page to grid-template-rows: auto auto auto minmax(1px, 1fr); somehow keeps the scroll position as you would expect. I don't know why though.

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

Here's the modified fiddle: https://fiddle.jshell.net/mxmcd9Lw/59/

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

Also, worth noting in Firefox Developer Edition v60 the bug appears to be fixed - your example works fine there. So I assume this is a known bug that will be resolved by browsers shortly.

这篇关于子元素高度更改时，容器滚动到顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！