Home Web Design CSS CSS Custom Scrollbar Modify | Scrollbar Style Customize

CSS Custom Scrollbar Modify | Scrollbar Style Customize

July 7, 2019

15322

Want to customize browser’s scroll bar on a webpage? Solution: Check Out This CSS Custom Scrollbar Modify. Customize Scrollbar Using HTML & CSS.

I am sure that you know what is scrollbar. A vertical or horizontal bar commonly located on the far right or bottom side of a window that allows you to move the viewport area up, down, left, or right. When we post long Paragraph on our site then user scrolls down to read the full post. If we made the scrollbar stylish then our user interaction could be better.

Today you will learn to customize the Scrollbar using CSS. Yes, you heard right, you can modify scrollbars on the webpage so easily. We just have to put 3 CSS command to modify the scroll bar‘s style. You can place this on your websites easily for an attractive & good UI.

So, Today I am sharing a CSS Custom Scrollbar Design. In other words, Modify or Customise the Scroll Bar On Website. After seeing this post you will to able create a custom scrollbar for your webpage, you can copy & pastes codes given here. This very easy to understand, a beginner also can get this easily. There are 3 commands to learn for creating this.

If you are thinking now how this modified Scrollbar actually is, then see the preview given below.

Preview Of Scrollbar Style Customization

See this video preview to getting an idea of how this scrollbar looks like.

https://webdevtrick.com/wp-content/uploads/stylish-scroll-bar.mp4?_=1

Now you can see this visually If you like this, then get the source code of its.

CSS Custom Scrollbar Source Code

Before sharing source code, let’s talk about it. First I have created a div with 3500px width, because of creating a scroll. This effect will run on WebKit browsers like Chrome, Safari, Opera. There is a CSS property ::-webkit-scrollbar to customize the scroll bar (get info). I have put 30px width of the scrollbar using this property.

After that, we have another two properties ::-webkit-scrollbar-thumb and ::-webkit-scrollbar-track. Scrollbar-thumb is for the element which moves on the scroll, we also can drag it up or down. Scrollbar-track is for the whole bar section, you can call this scrollbar’s background.

I have just given styles in these two elements in CSS. After getting the codes you will understand what are the styles I have placed. To creating this program you have to create only 2 files. One for HTML & one for CSS. Follow these steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com ) -->
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Custom Scrollbar | Webdevtrick.com</title>
      <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1> CUSTOM CSS SCROLLBAR</h1>

</body>
</html>

<!DOCTYPE html>

<head>

<title>CSS Custom Scrollbar | Webdevtrick.com</title>

</head>

<body>

<h1> CUSTOM CSS SCROLLBAR</h1>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/** code by webdevtrick ( https://webdevtrick.com ) **/
::-webkit-scrollbar {
   width: 30px;          
}

::-webkit-scrollbar-thumb {   
  border-radius: 30px;
  background: -webkit-gradient(linear,left top,left bottom,from(#ff8a00),to(#da1b60));
  box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);}

::-webkit-scrollbar-track {     
  background-color: #fff;
  background: linear-gradient(to right,#201c29,#201c29 1px,#100e17 1px,#100e17);
}
  body {
    margin: 0px;
    padding: 0px;
    background-color: #333;
    height: 3500px;
    width: 100%;
  }

  h1 {
    position: absolute;
    top: 50%;
    left: 49%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: arial;
    font-size: 55px;
    padding: 7px;
    border: 5px solid #FF484B;
    border-radius: 20px;
  }

/** code by webdevtrick ( https://webdevtrick.com ) **/

::-webkit-scrollbar {

width: 30px;

}

::-webkit-scrollbar-thumb {

border-radius: 30px;

background: -webkit-gradient(linear,left top,left bottom,from(#ff8a00),to(#da1b60));

box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);}

::-webkit-scrollbar-track {

background-color: #fff;

background: linear-gradient(to right,#201c29,#201c29 1px,#100e17 1px,#100e17);

}

body {

margin: 0px;

padding: 0px;

background-color: #333;

height: 3500px;

width: 100%;

}

h1 {

position: absolute;

top: 50%;

left: 49%;

transform: translate(-50%, -50%);

color: white;

font-family: arial;

font-size: 55px;

padding: 7px;

border: 5px solid #FF484B;

border-radius: 20px;

}

That’s It. Now you have successfully created CSS Custom Scrollbar With Modification, A Scrollbar Style Customize With CSS. If you have any question or doubt comment down below.

Thanks For Visiting, Keep Visiting.

16 COMMENTS

Ehtesham July 7, 2019 At 5:24 pm

Excellent bro. Cool !!. I just liked it most.

Reply
- shaan July 7, 2019 At 5:33 pm
  
  thanks, stay connected.
  
  Reply
Utsah Paikray July 8, 2019 At 3:45 am

it is only working in chrome.

Reply
- shaan July 8, 2019 At 4:07 am
  
  It will work on chrome, safari & opera.
  
  Reply
Ramu July 8, 2019 At 5:19 am

What about Firefox?

Reply
Sanket Bhangale July 8, 2019 At 7:00 am

How to apply a scroll bar for a particular division?

Reply
- shaan July 8, 2019 At 11:29 am
  
  ClassName::-webkit-scrollbar
  
  Reply
Syfer July 8, 2019 At 8:06 am

Should have added in the title that it’s for browsers that support webkit. It’s a waste of time seriously. You can get a universal look and feel with JS involved.

Reply
- shaan July 8, 2019 At 11:21 am
  
  Hey bro sorry, I will remember next time
  
  Reply
Valen July 8, 2019 At 11:24 am

I normally won’t keep reading about html design article on a website that has broken sticky header in mobile version

Reply
- shaan July 8, 2019 At 11:37 am
  
  Where is broken header??
  
  Reply
  - Syfer July 9, 2019 At 8:33 am
    
    Think he means your brand is covered by ads. Also the ads on the page is all over the place on mobile. This is one site am not visiting again 😂
    
    Reply
    - shaan July 9, 2019 At 12:35 pm
      
      As your wish bro.
      
      Reply
vamsi July 9, 2019 At 9:17 am

but its not working with IE 11 for me may be for all versions

Reply
- shaan July 9, 2019 At 12:35 pm
  
  I will be work on WebKit browsers like chrome, opera, safari.
  
  Reply
Mikael Elmblad February 6, 2021 At 11:12 am

Thank you Shaan for this cool scrollbar!
I made a demo for this: https://codepen.io/Tcip/full/NWbNNGB

test [b]test[/b]

Reply