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;