Search for a command to run...
Sometimes we want to create custom scrollbars in CSS for our website to make it stand out from the competition.
I am a web3 developer and I am passionate about CyberSecurity
Also writes on Medium - medium.com/@sahilchandravanshi/
Rendering Lists We will often want to display multiple similar components from a collection of data. In React, we will render lists with some type of loop. On this page, we’ll map() with React to filter and transform our array of data into an array o...
What is conditional rendering? React components will frequently need to display different information based on the circumstances. Conditional rendering in React refers to the process of delivering elements and components based on specific conditions....
What is React Props? Props are an acronym for "properties." Props are arguments that are passed into React components, providing a method for passing data from one component to another. They enable components to be reused. The component receives pro...
This guide demonstrates the easiest method for installing Kali Linux on Virtual Box on Windows and Linux. One of the greatest Linux distributions for those interested in security and hacking is Kali Linux. Although installing Kali Linux by replacing ...
Data type refers to the type of data that a JavaScript variable can hold. Assigning values to variables, including numbers, text, and true or false, has been all we've done up to this point. What are all of those things, and what are our various opti...
I'll demonstrate how to make custom scrollbars for your website using only CSS. I'll go over every potential problem you might run into and how to fix it.
We must first understand the various components of a scrollbar because each component must be styled separately.
A web page's scrollbar consists of several elements.
Scrollbar Track, Scrollbar Thumb, Arrow Buttons (Up and down/Left and right).
The thumb is the portion that we can move and show us the position where we are on a page.
The track is the portion behind the thumb that works as a background for the thumb. We move the thumb inside the track.
In this article, we will customize each of these elements. Let's Consider this Demo Page for that 👇
First, let’s see how can you customize your scrollbar in browsers other than Firefox.
To style the scrollbar, add the following code to your stylesheet.
::-webkit-scrollbar {
width: 0.7vw;
}
::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
background-color: #6e78ff;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #6d75e8;
}
Here, I have used 3 pseudo-elements
::-webkit-scrollbar - Affects the entire scrollbar.
::-webkit-scrollbar-thumb - Affects the draggable scrolling handle.
::-webkit-scrollbar-track - Affects the space where we move the thumb.
The problem is that all CSS properties don't work inside ::-webkit-scrollbar element.
For instance, I have used border-radius property in ::-webkit-scrollbar-track because border-radius property does not work inside ::-webkit-scrollbar element.
📝 Note: Here,
margin-topandmargin-bottomproperties inside::-webkit-scrollbar-trackwill only work for vertical scrollbars. Thewidthproperty only works for vertical scrollbars.
I have used viewport width vw units because if you use pixel px unit here then when you zoom in or out on a web page, the size of the scrollbar will change.
To avoid changing in size when users zoom in or out of my website, I want a fixed-size scrollbar on the page.
You'll notice there are no arrow buttons when you add the above code to your stylesheet. If you prefer not to use those buttons, the first example will work just fine.
But, you can use the code provided below if you want to add arrow buttons to your customized scrollbars.
::-webkit-scrollbar-button:single-button {
background-color: #ece4e4;
display: block;
background-size: 10px;
background-repeat: no-repeat;
}
::-webkit-scrollbar-button:single-button:hover {
background-color: #d0cbcb;
}
The base style for our buttons will be determined by the code above.
To give arrow buttons some flair, we must use ::-webkit-scrollbar-button pseudo-element along with other pseudo-classes.
:single-button
:vertical
:decrement
:increment
Now I will customize the arrow buttons.
For vertical scrollbar arrow buttons, you have to use :vertical pseudo-class to add custom styles.
Two other pseudo-classes are used :decrement and :increment with :vertical for up and down arrow buttons respectively.
In this case, you can also add SVG icons and other CSS properties.
/* Up arrow*/
::-webkit-scrollbar-button:single-button:vertical:decrement {
height: 14px;
width: 16px;
background-position: center 4px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='<http://www.w3.org/2000/svg>' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='50,00 0,50 100,50'/></svg>");
}
::-webkit-scrollbar-button:single-button:vertical:decrement:active {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='<http://www.w3.org/2000/svg>' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='50,00 0,50 100,50'/></svg>");
}
/* Down arrow*/
::-webkit-scrollbar-button:single-button:vertical:increment {
height: 14px;
width: 16px;
background-position: center 5px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='<http://www.w3.org/2000/svg>' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 100,0 50,50'/></svg>");
}
::-webkit-scrollbar-button:single-button:vertical:increment:active {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='<http://www.w3.org/2000/svg>' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 100,0 50,50'/></svg>");
}
There aren't many customization choices with Firefox. Firefox has two CSS properties that can be used to give its scrollbars a custom style.
Although, you don’t need a custom scrollbar in Firefox as the default one looks way better than other browsers.
scrollbar-width - This property allows us to set the width or thickness of the scrollbar. It accepts three values: auto, thin, and none. Here, auto is the default value, thin reduces the scrollbar's thickness from the default, and none gets rid of the scrollbar entirely.
scrollbar-color - We can customise the colour of the scrollbar's thumb and track using this property. It accepts auto as its value. auto is the default value. But you can pass two valid color names like red, blue, etc or you can pass two color codes like #FC9901, #F5F5F5.
scrollbar-color property, first color applies to the thumb of the scrollbar. The second color applies to the track of the scrollbar.📝 Note: Whenever we use these two properties, we must use them on the root element.
We can add styles for our scrollbars
* {
scrollbar-width: thin;
scrollbar-color: #f90 #f5f5f5;;
}
Here, I am selecting * it means everything. When you apply these properties using * then it works properly for all scrollbars.
If you set thin for scrollbar-width property, it will remove the arrow buttons and the scrollbar becomes very thin. Using it will get quite challenging.
But if you only use the scrollbar-color property and not the scrollbar-width, the default thickness, as well as the color, is applied. I believe it offers a better user experience and looks nicer.
If you have to use the scrollbar-width property for any reason, then set it to auto not thin.
I have made some custom ScrollBars for you, Codepen.
In this article, I have covered every component of a scrollbar., how you can customize them, their browser support, etc.
I hope you now clearly understand how to design unique scrollbars in CSS for any web page. Do, Share your thoughts on this!