javascript - 使用 flexbox 和 "column-reverse"，在 Chrome 上滚动时页面跳转

Question

几天来我一直在努力解决这个问题，但我仍然无法在我的网络应用程序之外重现它。

我有一个看起来像这样的可滚动列表: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

Answer 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 版本。