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

问题描述

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

单击按钮后，我试图在其顶部添加动态内容。预期的行为是在按钮上方添加动态内容时，应将按钮向下推以为新元素腾出空间。在Firefox中工作正常。但是在Chrome中，按钮停留在同一位置，浏览器向上滚动。

这是代码框

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

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

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

解决方法

在mozilla中，您应该使用：

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

在Chrome中使用：

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