How to Change The Scrollbar to Custom Design? (Avoid Using The Default Browser Look)

How to change the scrollbar to custom design? (avoid using the default browser look)

What you're seeing is WebKit-specific restyling of the browser's scrollbars. It doesn't apply to browsers based on other rendering engines. IE uses an entirely different set of style rules(there's a link in that post), and Firefox doesn't allow it at all normally, I believe. Mozilla, and the W3, consider the main browser scrollbars part of the OS GUI and so not something you should be messing with. You can get around these inconsistencies with scroller replacements like in Adam's suggestion, but the main scrollbars you're stuck with.

How to style in-page scrollbar without changing browser scrollbar?

Add the class .scroll before the -webkit code

.scroll::-webkit-scrollbar {
    width: 16px;
}

.scroll::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: white; 
}

.scroll::-webkit-scrollbar-thumb {
   -webkit-border-radius: 10px;
   border-radius: 10px;
   background: #ADADAD;
}

.scroll::-webkit-scrollbar-thumb:window-inactive {
    background: #ADADAD;
}

how to change browsers default scrollbar using css or jquery

Using CSS you can only style the webkit's scrollbar.

If you want a cross browser solution you can use the following plugin:

http://jscrollpane.kelvinluck.com/

or you can choose any from the list given on the following link:

http://www.sitepoint.com/10-jquery-custom-scrollbar-plugins/

How can I change the layout of the scroll bar on desktop monitors, as seen on tablets and phones?

use ::-webkit-scrollbar in CSS

This is not supported in Firefox, Try SmoothScrollbarJs for firefox

::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
} 

directly copied from w3schools

CSS3 - How to restore ::-webkit-scrollbar property to the default scroll bar

UPDATE 2022

I answered this almost 10 years ago and seems like after 2021 this solution stop working, read the solution from @Volomike, it might get you where you want to.

---

I just realized you can set all the properties in auto; and will do the trick. This is a self answer but I guess someday someone can have the same question.

/*Scroll bar nav*/
::-webkit-scrollbar {
    width: auto;
}

/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: auto; 
    -webkit-border-radius: auto;
    border-radius: auto;
    background:auto;    
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius:auto;
    border-radius:auto;
    background:auto; 
    -webkit-box-shadow:auto; 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: auto; 
}

I don't know if exist another method.

-- UPDATE --
Look like you can also use the initial and unset value
//reverting all the values

::-webkit-scrollbar {
    all:unset;
}

or apply to an specific one {width : unset} || {width : initial}

NOTE: Using unset will not work on IE11

---

Related Topics