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 s…


This content originally appeared on DEV Community and was authored by Anjali Jha

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!!

End


This content originally appeared on DEV Community and was authored by Anjali Jha


Print Share Comment Cite Upload Translate Updates
APA

Anjali Jha | Sciencx (2021-07-19T14:28:50+00:00) Creating a custom scrollbar. Retrieved from https://www.scien.cx/2021/07/19/creating-a-custom-scrollbar/

MLA
" » Creating a custom scrollbar." Anjali Jha | Sciencx - Monday July 19, 2021, https://www.scien.cx/2021/07/19/creating-a-custom-scrollbar/
HARVARD
Anjali Jha | Sciencx Monday July 19, 2021 » Creating a custom scrollbar., viewed ,<https://www.scien.cx/2021/07/19/creating-a-custom-scrollbar/>
VANCOUVER
Anjali Jha | Sciencx - » Creating a custom scrollbar. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/07/19/creating-a-custom-scrollbar/
CHICAGO
" » Creating a custom scrollbar." Anjali Jha | Sciencx - Accessed . https://www.scien.cx/2021/07/19/creating-a-custom-scrollbar/
IEEE
" » Creating a custom scrollbar." Anjali Jha | Sciencx [Online]. Available: https://www.scien.cx/2021/07/19/creating-a-custom-scrollbar/. [Accessed: ]
rf:citation
» Creating a custom scrollbar | Anjali Jha | Sciencx | https://www.scien.cx/2021/07/19/creating-a-custom-scrollbar/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts