10+ CSS Custom Scroll Bar

CSS Custom Scroll Bar – Are you looking for CSS Custom Scroll Bar, If yes then in this post I am going to share hand-picked CSS Scroll Bar Examples for you. Scrollbars are one of the critical elements of the browser UI that lets us access information that’s out of view. As such CSS has steadfastly refused to yield much in the way of letting designers style their appearance. Using CSS, however, the sky becomes in the limit, by replacing the scrollbar UI with a custom one so that You can use these CSS Scroll Bar Plugins in your next web based projects.

CSS Scroll Bar

Following are the list of CSS Scroll Bar.

Fade in and out scroll bar on div hover DEMO

 Fade in and out scroll bar on div hover

A scroll bar that fades in and out when parent div is hovered over. Wanted it to be like the scroll bar on behance.net. Also its pure CSS! – By kqlambert


Hide scroll bar Cross-browser DEMO

 Hide scroll bar Cross-browser

Hide Scroll bar cross browser – By JonAnderDev


CSS Scroll Bars DEMO

 CSS Scroll Bars

– By GhostRider



Custom Scroll Bar for Chrome DEMO

 Custom Scroll Bar for Chrome

– By MathieuRichard


AngularJS Directive: Scroll bar on top and bottom of div DEMO

 AngularJS Directive: Scroll bar on top and bottom of div

– By michaeljcalkins


Horizontal Scroll with out the scroll bar DEMO

 Horizontal Scroll with out the scroll bar

Here is an example to make horizontal scroll on a div by hiding it scroll bar with the help of jquery – By suriyag


Dynamic Dashboard Layout with CSS & jQuery DEMO

 Dynamic Dashboard Layout with CSS & jQuery

Fixed Layout with custom scroll bar. – By ravenous


Scroll Bar Fix DEMO

 Scroll Bar Fix

Came across an issue at work with the overflow auto scroll bar. It worked fine in most browsers, but on windows it not only looked ugly, but added unwanted space to the div (the container in question had a fixed width). A google search came up with little good alternatives other than the no scroll bar hack above, which can be confusing from a user experience standpoint. The content may be placed in a way though to imply more content further down. Customizing the scrollbar is another option but isn’t supported in IE or Firefox. – By ianchouinard



Webkit scrollbars DEMO

 Webkit scrollbars

A little play around styling webkit scroll bars… probably not a good idea to use these 🙂 – By tholman


Bootstrap Modal Scroll Bar DEMO

 Bootstrap Modal Scroll Bar

– By mdshohelrana


Scroll Position Indicators DEMO

 Scroll Position Indicators

Since Mac OS doesn’t always show scroll bars, I thought I’d make some little indicators to show where the user is on long pages. – By zacharyolson


Scroll bar manipulation DEMO

 Scroll bar manipulation

Changing scrollbar width on hover and scroll. – By jaflo


I Hope you liked Hand-picked list of CSS Scroll Bar, Don’t forget to Subscribe My Public Notebook for more useful Hand-picked HTML and CSS code examples, tutorials and articles.