如何设置 chrome 滚动条的样式以使其看起来和行为像 Firefox

Question

我在 Firefox 中有以下 css：

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

有什么方法可以使 chrome 滚动条的样式看起来像 Firefox 吗？

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

我创建了一个下面的codepen来测试它

  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：

Note: Custom scrollbars are not supported in Firefox or in Edge, prior to version 79.

如何设置 chrome 滚动条的样式以使其看起来和行为像 Firefox

How to style chrome scrollbar to make it look and behave like firefox

css

scrollbar

overflow

customization