css - 如何设置 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.