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

user_47633 0
Viewed 400

I have the following css in Firefox:

enter image description here

The same page looks like this in chrome:

enter image description here

Is there any way to style chrome scrollbar to make it look like firefox?

I'm just using overflow-y: auto and a fixed heigth.

I created a the following codepen to test it

  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>
customization overflow scrollbar css
1 Answers

As a solution, you can create your own custom scrollbar and use it to ensure the output is the same in all other browsers.

::-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>

From the W3schools:

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

user_57379500
Related