Tutorial Custom HTML Scrollbar

Kyle Fardy

Kyle Fardy

Veteran
Donator
Messages
179
Reaction score
89
Points
888
Ever Wandered How Some Websites Have A Custom Scrollbar?

Well Today Im Going To Show You How!

So Lets Get Into It.

First Open An IDE Of Your Choice (Notepad++, Sublime, Visual Studio Code, Or Just Notepad)

Create A Document Called
Code: 
sidebar.css

Then Save It!

Now Open The sidebar.css File And Add This To It

Code: 
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color:#05a34e;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    background-color:#1e991e;
}

You May Change The
Code: 
background-color:#1e991e;

To Any Color You Want Providing Its In Either A HEX Format Or A RGB / RGBA Format.

This Is What Hex Formatting Looks Like
Code: 
 #FF0000; //RED

This Is What RGB Formatting Looks Like
Code: 
 rgb(255, 0, 0); //RED

This Is What RGBA Formatting Looks Like
Code: 
 rgba(255, 0, 0, 0.3); //RED

Now Once You Have Added That To The
Code: 
sidebar.css

Save It!

Now To Go Your Server / Website (FTP / File Manager)

Create A Folder Called
Code: 
sidebar

Now Upload The File To Anywhere On Your Server / Website (FTP / File Manager)

Now Add This To The Web Page You Want The Scrollbar To Show On

Code: 
<link rel="stylesheet" href="sidebar/sidebar.css">

Make Sure To Add It Anywhere Between

Code: 
 <head>

And

Code: 
 </head>


Now You Should Be Presented With Something Like This

(My Website Has A Dark Grey & Green Colour Effect So I Made My Scrollbar Green)

OxSYCbFwSgqLc-O5uPLExQ.png


As You Can See, This Custom Scrollbar Tutorial Doesn't Just Change The Scrollbar On The Side!

It Changes Any Scrollbar That Is On Your Web Page



Well That's All For Today Guys,

If You Have Any Questions Don't Hesitate To Contact Me
 
CabCon

CabCon

Head Administrator
Staff member
Head Staff Team
Messages
5,093
Reaction score
2,881
Points
1,103
PhucedMODZ said:
Ever Wandered How Some Websites Have A Custom Scrollbar?

Well Today Im Going To Show You How!

So Lets Get Into It.

First Open An IDE Of Your Choice (Notepad++, Sublime, Visual Studio Code, Or Just Notepad)

Create A Document Called
Code: 
sidebar.css

Then Save It!

Now Open The sidebar.css File And Add This To It

Code: 
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color:#05a34e;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    background-color:#1e991e;
}

You May Change The
Code: 
background-color:#1e991e;

To Any Color You Want Providing Its In Either A HEX Format Or A RGB / RGBA Format.

This Is What Hex Formatting Looks Like
Code: 
 #FF0000; //RED

This Is What RGB Formatting Looks Like
Code: 
 rgb(255, 0, 0); //RED

This Is What RGBA Formatting Looks Like
Code: 
 rgba(255, 0, 0, 0.3); //RED

Now Once You Have Added That To The
Code: 
sidebar.css

Save It!

Now To Go Your Server / Website (FTP / File Manager)

Create A Folder Called
Code: 
sidebar

Now Upload The File To Anywhere On Your Server / Website (FTP / File Manager)

Now Add This To The Web Page You Want The Scrollbar To Show On

Code: 
<link rel="stylesheet" href="sidebar/sidebar.css">

Make Sure To Add It Anywhere Between

Code: 
 <head>

And

Code: 
 </head>


Now You Should Be Presented With Something Like This

(My Website Has A Dark Grey & Green Colour Effect So I Made My Scrollbar Green)

OxSYCbFwSgqLc-O5uPLExQ.png


As You Can See, This Custom Scrollbar Tutorial Doesn't Just Change The Scrollbar On The Side!

It Changes Any Scrollbar That Is On Your Web Page



Well That's All For Today Guys,

If You Have Any Questions Don't Hesitate To Contact Me
Click to expand...
Nice tutorial! Thanks for creating it! :heart:
 
Top