Tutorial Custom HTML Scrollbar

PhucedMODZ

Trial Moderator
Staff member
Donator
Messages
180
Points
313
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)



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

Head Administrator
Staff member
Head Staff Team
Messages
4,367
Points
553
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)



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
Nice tutorial! Thanks for creating it! :heart:
 

Top