An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
Some of Our Sources
- Technology Review
- Simplebits
- The Logo Smith
- My Ink Blog
- Fudge Graphics
- Web Design Ledger
- Reencoded
- Design Modo
- Codrops
- Dev To
Help Webnuz
Referal links:
Create Custom Scrollbar Using CSS
I was always interested in learning about how to make a custom scrollbar and finally, I managed to do it.
First, let me show the components of a scrollbar. A scrollbar contains the thumb and the track. The thumb is the draggable scrolling handle and the track is the progress bar, the entire scrollbar itself.
The Scrollbar Width
First, we define the width of the scrollbar (width for vertical scrollbars and height for horizontal ones) using the following pseudo element: ::-webkit-scrollbar
::--webkit-scrollbar { width: .6em;}The Scrollbar Track
We can style the scrollbar by shadows, border-radius, background-colors and use the pseudo element: ::-webkit-scrollbar-track
::--webkit-scrollbar-track { background-color: transparent;}The Scrollbar Thumb
The scrollbar thumb can be styled by background-colors, gradients, shadows, border-radius. We use the pseudo element ::-webkit-scrollbar-thumb for it.
::--webkit-scrollbar-thumb { background-color: #e1d3cf; border-radius: 5px; border: .2em solid #25649a;}Other pseudo elements:::-webkit-scrollbar-button - the arrows pointing upwards and downwards.::-webkit-scrollbar-corner - the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet.
Here you can see a codepen demo and play with it:
Unfortunately, this way works on Webkit-based browsers only. For Mozilla Firefox we can use only two parameters: scrollbar-color and scrollbar-width and they should be applied to the <html> element, not the <body>.
The scrollbar-width has following values: auto, inherit, initial, none, revert, thin and unset. We cant define a specific number.
With the scrollbar-color we define a color for both the scrollbar track and thumb as pair values.
html { scrollbar-color: #e1d3cf #25649a; scrollbar-width: thin;}In this case, we can't use shadows, gradients, or rounded edges to style it.
That's all folks! Thank you for reading. For further information, please, check out the MDN resource.
Original Link: https://dev.to/highflyer910/create-custom-scrollbar-using-css-4ff3
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To