如何设置 Chrome 滚动条的样式以使其外观和行为类似于 Firefox

Question

我在 Firefox 中有以下 CSS：

同一页面在 Chrome 中看起来像这样：

有什么方法可以设置 chrome 滚动条的样式，使其看起来像 firefox 吗？

我只是使用 Overflow-y: auto 和固定高度。

我创建了以下代码笔来测试它

  ul {
    overflow-y: auto;
    height: 50px;
    width: 150px;
  }

<ul>
  <li>Finance</li>
  <li>Accounting</li>
  <li>Support</li>
  <li>Reports</li>
</ul>

<ul>
  <li>Finance</li>
  <li>Accounting</li>
  <li>Support</li>
  <li>Reports</li>
</ul>
  
<style>
  ul {
    overflow-y: auto;
    height: 50px;
    width: 150px;
  }
</style>

Answer 1

作为解决方案，您可以创建自己的自定义滚动条并使用它来确保输出在所有其他浏览器中相同。

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #F2F2F2;
}

::-webkit-scrollbar-thumb {
  background: #BDBDBD;
}

::-webkit-scrollbar-thumb:hover {
  background: #6E6E6E;
}

<ul>
  <li>Finance</li>
  <li>Accounting</li>
  <li>Support</li>
  <li>Reports</li>
</ul>
  
<style>
  ul {
    overflow-y: auto;
    height: 50px;
    width: 150px;
  }
</style>

来自W3schools：

注意：79 版本之前的 Firefox 或 Edge 不支持自定义滚动条。