How to edit the scrollbar in Firefox and Google Chrone

Question

Hello I have this CSS code that configures the scroll bar on the site with everything does not work in Firefox and even in Google Chrone someone could help me follows the code below.

::-webkit-scrollbar {
    width:2px;
    height:10px;
}
::-webkit-scrollbar-thumb:vertical {
    background:#000000;
} 
::-webkit-scrollbar-thumb:horizontal {
    background:#000000;

}

This CSS code worked perfectly in Opera Browser.

Answer 1

Styling the scrollbar is not a feature specified in CSS, it is not a standard. Still many users and developers request this (and others) Feature be implemented in other browsers through the communication channels of each one.

Navigators Webkit already allow this stylization of scrollbar, as well as the Internet Explorer from version 9. Firefox... well... exists a topic in Bugzilla on the subject 14 years ago.

Like this yet is not a resource cross-browser the best option is to choose to use some plugin that allows styling and treats the difference between browsers.

---

On this page there is a selection with some, as:

• Perfect Scrollbar - DEMO
• Scroller - DEMO
• Slimscroll - DEMO
• jScrollPane - DEMO

---

Ways to change the scroll browser standard using the Perfect Scrollbar (that of the listed above was what I found most interesting):

Example [scrolling the entire page]

$(function() {
  $('body').perfectScrollbar();
});

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.classQueForcaOScroll {
  height: 800px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<!-- JS do plugin -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.5.9/perfect-scrollbar.min.js'></script>

<!-- CSS do plugin -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.5.9/perfect-scrollbar.min.css'>

 <!-- div só para forçar o scroll da página -->
<div class='classQueForcaOScroll'></div>

Example [scrolling on a specific element]

$(function(){
  $('.foo').perfectScrollbar();
});

.foo {
  position: relative;
  border: 2px solid #ccc;
  overflow: hidden;
  height: 60px;  
  width: 250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.5.9/perfect-scrollbar.min.js'></script>

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.5.9/perfect-scrollbar.min.css'>

<div class='foo'>
  scroll scroll scroll scroll<br>
  scroll scroll scroll scroll<br>
  scroll scroll scroll scroll<br>
  scroll scroll scroll scroll<br>
  scroll scroll scroll scroll<br>
</div>