Skip to content

Instantly share code, notes, and snippets.

@jahidulsaeid
Created November 16, 2021 05:49
Show Gist options
  • Save jahidulsaeid/966863d65f2cf801f8a3c09c34201c10 to your computer and use it in GitHub Desktop.
Save jahidulsaeid/966863d65f2cf801f8a3c09c34201c10 to your computer and use it in GitHub Desktop.
Creating a custom scrollbar
Recently, I figured out about customizing scrollbars. Adding custom scrollbars to websites you make, helps enhance it even further and also helps in overall color-coordination.
To start with, we use ::-webkit-scrollbar.It can be included in your CSS section. It's a pseudo element used to modify the look of a browser’s scrollbar. Most browsers other than firefox support this.
A sample example of the code would be-
/* width */
::-webkit-scrollbar {
width: 10px;
}
This section targets the width of your scrollbar.
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
This relates to the progress bar. Properties such as border radius, box shadow can also be added.
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
It specifies the properties of the scrolling handle that can be dragged.
To design that even further you can try-
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
This will change the color upon hovering.
Similarly some of the other pseudo elements you can use are-
::-webkit-scrollbar-button
the buttons on the scrollbar (arrows pointing upwards and downwards).
::-webkit-scrollbar-track-piece
the track (progress bar) NOT covered by the handle.
::-webkit-scrollbar-corner
the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet
and many more
Hope it helps!!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment