Learn how to create a custom scrollbar with CSS.
Make money for being or staying online/internet.
You will get a $50 starting gift when you join using this code: Exode4LKrbujm1z and link:: GET THE OFFER NOW!!
When ever you visit a site or webpage on a desktop that has alot of content to scroll through,the browser will always provide you with the Default Scrollbar on your right hand side to scroll UP & DOWN.
In this simple article I will help you to get rid of the Default boring scrollbar.
Note::Custom scrollbars are not supported in Firefox or IE/Edge.
Custom Scrollbars are supported by Webkit browsers, such as Chrome, Opera and Safari.
These Webkit browsers support the non-standard ::-webkit-scrollbar pseudo element, which allows you to modify the look of the browser's scrollbar.
In case you are reading this article on a desktop or tablet, the live Example is already on your screen.We also use a custom scrollbar on this site.
I also created a simple video to guide you step by step.Watch if you are intrested.
So let's build an awesome custom scrollbar using css.
Sample Markup
Below is a basic html structure with the head section where you always link your external and internal files.
<html> <head> <title>Custom ScrollBar</title> <link rel="stylesheet" type="text/css" href="yourfile.css"> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua.</p> </body> </html>
NOTE:: you should be having alot of content on the page inorder for it to be scrollable.
ScrollBar styles
/*Scrollbar width*/ ::-webkit-scrollbar{ width:15px; } /*Scrollbar Track Area*/ ::-webkit-scrollbar-track{ box-shadow: inset 0 0 5px #00796b; } /*Scrollbar Handle*/ ::-webkit-scrollbar-thumb{ background: #00796b; border-radius: 15px } /*Scrollbar Handle on hover state*/ ::-webkit-scrollbar-thumb:hover{ background: #006d60; } /*Scrollbar buttons - Up & Down*/ ::-webkit-scrollbar-button{ background: teal; }
Note::The styles that I have shared above, are the same scrollbar styles that we use on the site. So it's upon you the developer to customize your scrollbar.
I now spend most of my day creating the best content I possibly can to give away for free. If I have helped you in any way please consider becoming a subscriber on my channel OSTON CODE CYPHER
Save up to 80% with this Domain & Shared Hosting package deal! 80% OFF - GET OFFER NOW
Related Post(s)
» How to create Text Animation using HTML and CSS
» How to create a Fullscreen Background Video(Source Code)
» How to style an hr element using CSS
» Overriding The Default Text Selection Color With CSS
» Learn how to create an overlay effect with CSS
collections_bookmark Category :: Cssdate_range Published :: 4 years ago At: 03:35 PM
event_note Detailed Date :: Oct 23rd, 2019
person Writer :: Code