使用 flexbox 和“column-reverse”，在 Chrome 上滚动时页面会跳转答案

【问题标题】：With flexbox and "column-reverse", the page jumps when scrolling on Chrome使用 flexbox 和“column-reverse”，在 Chrome 上滚动时页面会跳转
【发布时间】：2021-03-23 20:21:52
【问题描述】：

我几天来一直试图找出问题所在，但我仍然无法在我的网络应用程序之外重现它。

我有一个看起来像这样的可滚动列表：https://codesandbox.io/s/jolly-galileo-gk5x1?file=/src/App.js

向上滚动时，新项目会加载到顶部。我需要 flex-direction: column-reverse 在页面加载后立即滚动到底部。

问题在于，当加载新项目时，它通常会向上滚动几百像素。当我在 Chrome 上使用鼠标或触控板滚动时会发生这种情况。在使用移动模式模拟触摸时，它不会在 Firefox、Edge 或 Chrome 中发生。我无法在上面的 CodeSandbox 链接中重现它，而且我的网络应用程序还没有上线。

添加overflow-anchor: none 并没有解决它。还有哪些其他可能的问题？我多次重写了代码，所以我认为这可能是浏览器的怪癖。另外，我认为在我更新到 Chrome 87 之前不会出现此问题。

编辑：禁用平滑滚动似乎可以解决问题。仍在尝试弄清楚如何修复平滑滚动。

平滑滚动：https://imgur.com/HJz3n0T

平滑滚动：https://imgur.com/ugxxJlc

【问题讨论】：

你能把这个问题制作成 gif 吗？
这就是你想要的吗？ codesandbox.io/s/quizzical-bartik-pmsq2 为父 div 和子 div 添加了 transform:'rotate(180deg)'
@Daniel_Knights 好主意！我添加了 2 个视频，似乎是平滑滚动导致了问题
有同样的问题，我也很确定它直到最近才发生。 “禁用平滑滚动”是什么意思——这是 Windows 设置吗？
chrome://flags 2个月后，我仍然无法通过平滑滚动完全修复它。我知道滚动的实现有多平滑，但我认为它锚定到了错误的元素。

标签： javascript html css

【解决方案1】：

这是由于未能使布局子树无效以响应滚动原点更改而导致的 chrome 回归。目前的解决方法是在更新要在列表中呈现的项目时执行以下操作

function forceInvalidateLayout(parent) {
  parent.insertBefore(document.createElement("br"), parent.firstChild);
  parent.offsetTop;
  parent.removeChild(parent.firstChild);
}

这将强制布局无效并重新计算项目的偏移量。

Chrome bug

更新 - 解决方法 2

如果项目是display: grid，则它们不会受到此问题的影响


.parent > * { display: grid; }

此错误影响 chrome 版本 87 至 91。

【讨论】：