How to edit the scrollbar in Firefox and Google Chrone

Question

How to edit the scrollbar in Firefox and Google Chrone

Navigation

#1 by (2 votes)

3

Hello I have this CSS code that configures the scrollbar on the site with everything not working in Firefox and neither Google Chrone could anyone help me follow 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 the Opera Browser.

css

asked by anonymous 11.05.2015 / 08:46

1 answer

Architecture for Distributed Distributed App Use viewbags for metadata or place them in a ViewModel

score 2 · Accepted Answer

Styling the scroll bar is not a feature specified in CSS, it is not a default. Yet many users and developers request that this (and other) feature be implemented in other browsers through each other's communication channels.

Webkit browsers already allow this styling of scrollbar , as well as Internet Explorer from version 9. Firefox already ... well ... exists a topic in BugZilla on the subject for 14 years.

the best option is to use some plugin that allows the stylization and treat the difference between browsers.

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

Ways to change the default scroll of the browser using Perfect Scrollbar (which I found the most interesting):

Example [applying scroll on whole 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><!--JSdoplugin--><scriptsrc='https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.5.9/perfect-scrollbar.min.js'></script><!--CSSdoplugin--><linkrel='stylesheet'href='https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.5.9/perfect-scrollbar.min.css'><!--divsóparaforçaroscrolldapágina--><divclass='classQueForcaOScroll'></div>

Example[applyingscrolltoaspecificelement]

$(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>