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

【问题标题】：Different scroll behavior in Chrome and Firefox for dynamic contentChrome 和 Firefox 中针对动态内容的不同滚动行为
【发布时间】：2020-12-06 05:55:07
【问题描述】：

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

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

这里是代码框

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

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

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

【问题讨论】：

标签： css google-chrome firefox scroll

【解决方案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;

【讨论】：