Chrome 和 Firefox 中动态内容的不同滚动行为

Question

我有一个固定的标题，容器 div 有滚动。

单击按钮后，我尝试在其顶部添加动态内容。预期的行为是当动态内容添加到按钮顶部时，应按下按钮以为新元素腾出空间。这在 Firefox 中运行良好。但在 Chrome 中按钮保持在同一位置并且浏览器向上滚动。

这是代码和框

https://codesandbox.io/s/nifty-allen-gtklp

向下滚动并单击切换按钮。观察 Chrome 和 Firefox 中的行为。

有人知道为什么行为不同吗？

Answer 1

在 mozilla 中，你应该使用：

body{
  overflow-y : scroll;
  scrollbar-color: blue;
  scrollbar-width: thin;
}

在铬合金中使用：

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
  background: #888; 
}
::-webkit-scrollbar-thumb:hover {
  background: #555;

Answer 2

Chrome 可能会使用滚动区域内的元素作为“锚点”。当在滚动区域内添加或更改内容时，它将尝试将锚元素保持在适当的位置。您可以使用

overflow-anchor: none

来防止元素被用作锚点。为了防止锚定在一起，请添加以下内容到您的 css 中。

* {
  overflow-anchor: none;
}

这会阻止所有元素用作锚点，因此应该为您提供类似于 Firefox 的滚动行为。