Learn how to create a custom scrollbar with CSS.

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.

copy

<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

copy


/*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

» How to create a Fullscreen Background Video(Source Code)

» Create A Cool Layout Using CSS

» How do I wrap text in a pre tag?[SOLVED]

» Learn how to create a custom scrollbar with CSS.

Category :: Css
Published :: 2 years ago At: 03:35 PM
Detailed Date :: Oct 23^rd, 2019
Writer :: Code

RECENT POSTS

6 months ago

A JavaScript library for formatting and manipulating numbers - Numeral.js

Check out this lightweight JavaScript library used for formatting and manipulating numbers.

7 months ago

All Countries Drop Down List | HTML Select Country Name

This simple country dropdown list is freely available for you to copy and use in your project forms.

7 months ago

HTML Entities Code Alphabet Discovery Using JavaScript

In this post I will show how writing just a few lines in JavaScript will allow you to render, browse and discover the alphabetical letters using a set of HTML entity codes.

7 months ago

YTS YIFY MOVIES API - PROJECT PREVIEW

Download YTS YIFY movies using this simple project I created using their API.

7 months ago

Display Random Advice On Your Website or Web App Using Advice Slip JSON API

Here is a short project to display the use of APIs. I decided to work with an advice API because it seemed like a fun one that I haven't worked on before.

9 months ago

How do I get a YouTube video thumbnail from YouTube using PHP

Have you ever been on youtube and admired a thumbnail of a video?

11 months ago

How to recreate Facebook's console warning

When I was inspecting some code on Facebook. I came across this interesting feature. A simple styled console warning message from Facebook to its dear users(products).

1 year ago

How To Create A Stacked Gallery Using HTML And CSS Source Code

In this post I provide you with the source code for the youtube tutorial I made on how to create a Stacked image gallery Using HTML and CSS.

Subscribe

Learn how to create a custom scrollbar with CSS.

Sample Markup

ScrollBar styles

Related Post(s)