Change the color of the scroll bar

Question

I want to change the scroll bar style, for this I used below css, but I want to use it for a specific div on the page, not for the whole page. how can i customize it using div class or id

::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px; } ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: #A8A8A8; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } ::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); } 

Answer 1

Yes, we can achieve this using the id of the element,

Try it,

 #div1::-webkit-scrollbar { width: 12px; } #div1::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px; } #div1::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: #A8A8A8; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } #div1::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }​ 

Hope it works ...

Live demo

Note: I think it works fine in chrome. but ff etc. he does not work.

Answer 2

If you really need some custom scrollbars, there are some hacks you can use in Javascript and CSS. Good article on CSS-tricks .

There are also many jQuery plugins. The one I used is called Lazybars - it's really easy to implement.

Hope this helps

Answer 3

CSS customization is currently only supported by webkit browsers (Safari, Google Chrome, and Opera). IE and Firefox do not support CSS styles for scrollbars. To customize your CSS-based custom scrollbar, you must use a javascript solution that emulates the scroll behavior or replace your own scrollbars with custom elements (custom scrollbars are under this custom scrollbar or hidden by the shell with overflow:hidden ).

There are many free jQuery plugins. Scrolling emulators (e.g. jScrollPane , Malihu Custom Scrollbar , perfect-scrollbar , etc.) provide full control over scrollable content, but have more js (to emulate and handle all events) and scroll behaior differs from normal scroll behavior. In addition, many scroll bars on one page can slow down.

Scroll bars that use native scrolling (e.g. jQuery Scrollbar , Scroller , Baron , etc.) are smaller than the code and ensure that scrolling will always work (even if the plugin does not work due to some kind of error) + less code ( since there is no need to emulate scrolling) + automatically supports all scrolling functions, such as scrolling to a focused element, scrolling for text selection, scrolling to an anchor element, touch scrolling, etc.

You can compare custom scroll plugins here