css - 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;
}

在 chrome 中使用:

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