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

Question

I have the following css in Firefox:

The same page looks like this in chrome:

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>

Answer 1

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.