受页面元素（Chrome）内部布局更改影响的滚动位置？答案

【问题标题】：Scroll position affected by internal layout changes inside a page element (Chrome)?受页面元素（Chrome）内部布局更改影响的滚动位置？
【发布时间】：2021-01-16 16:01:49
【问题描述】：

https://jsfiddle.net/gxas8h7L/5/

运行小提琴并向下滚动，直到页面顶部与红色子框之一相交。观察滚动位置随着“世界”的周期性切换而变化。（看起来整个页面向上/向下跳跃）

切换不影响父级高度。这严格来说是“组件内部”的变化。

如果灰色框是绝对定位的，效果仍然存在。

罪魁祸首似乎是红框内项目的中心对齐（flex）（align-items: center;）似乎chrome真的更喜欢“hello”而不是移动..

这是 Chrome 的错误还是一些奇怪的 css 功能？

在 Firefox 中不会发生。

在 Chrome 版本 85.0.4183.102（官方构建）（64 位）Linux 中测试

setInterval(
    () => {
        $(".foo").toggle()
    console.log(document.scrollingElement.scrollTop)
}, 800)

#c {
  height: 3000px;
}

#x1 {
  top: 10px;
}
#x2 {
  top: 130px;
}
#x3 {
  top: 260px;
}

.item {
  /* position: absolute; */
  left: 0px;
  height: 100px;
  width: 400px;
  background-color: gray;
  padding: 4px;
  margin-top: 10px;
}

.bar {
  display: flex;
  align-items: center;
  height: 70px;
  background-color: red;
}

.elem {
  border: 2px solid black;
  margin-left: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="c">
  <div id="x1" class="item">
    <div class="bar">
      <div class="elem">
        <div>hello</div>
        <div class="foo">world</div>
      </div>
    </div>
  </div>
  <div id="x2" class="item">
    <div class="bar">
      <div class="elem">
        <div>hello</div>
        <div class="foo">world</div>
      </div>
    </div>
  </div>
  <div id="x3" class="item">
    <div class="bar">
      <div class="elem">
        <div>hello</div>
        <div class="foo">world</div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： html css google-chrome flexbox

【解决方案1】：

基本规则是：如果滚动内容的子元素的css box改变高度并且当前与视口的上边框相交，则调整滚动位置，使顶部该框的边框停留在当前位置。

这是有意义的，因为您希望增量加载的内容向下推页面，而不是将页眉进一步向上推。

Firefox（88.0 Linux 64 位）也这样做，唯一需要注意的是，如果框反复更改其高度，则在第 10 次更改后将被忽略。

盒子是滚动内容的直接子还是间接子并不重要。

影响这种行为的 css 属性很少，我只知道两个：

display: none（也许并不奇怪，因为没有计算盒子的高度）
flex-direction: column-reverse 在容器上（此外必须是 flexbox）。在这种情况下，行为是垂直反转的，与视口的 bottom 边框相交的子元素的 css 框高度变化会导致滚动调整。

【讨论】：