How to customize the website scrollbar? In this tutorial, we want to check the customization of the scroll bar with webkit through CSS.
How to customize the website scrollbar? In this tutorial, we want to check the customization of the scroll bar with webkit through CSS.
You can customize the website's scroll bar or slider through CSS codes and change each part to your liking. This feature in website design gives a special effect to the appearance of the website. Below we describe the different parts of the scroll bar.
In the section below, you can see different parts of a scroll bar, which has a number next to each one.
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }
The numbers are for different parts of the scrollbar, which you can see in the picture below.
For example, if you want to change the color of the scroll, it uses the option code 5 and adds the background property according to the code below.
::webkit-scrollbar-thumb {
background: #000
}
See all scroll bar selector classes in the table below.
:horizontal :vertical :decrement :increment :start :end :double-button :single-button :no-button :corner-present :window-inactive
To make more changes on the scrollbar, you can use the selector class as in the example below.
::-webkit-scrollbar-track-piece:start {
/* Select the top half (or left half) or scrollbar track individually */
}
::-webkit-scrollbar-thumb:window-inactive {
/* Select the thumb when the browser window isn't in focus */
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
/* Select the down or left scroll button when it's being hovered by the mouse */
}
To change the properties of each section of the scroll bar, you can change them according to the above images and codes.
Source » Itroz Academy
If you want to start programming language recently, we will introduce you three of the best.
In the next four years, Trump's influence on international relations and cryptocurrencies could change significantly.
Find out what your IP is with just one click. Stay with us to find out how to find the IP of a computer, laptop or phone.
MVC or Model-View-Controller architecture is a design pattern used to develop web applications. This model consists of
Learning how to pay for website design in installments at any time of the day or night automatically at Itroz Digital Agency
Suggested links in AI chats and platforms increase your website traffic—but how?
AEO is a new term that has emerged with the rise of artificial intelligence, and its importance is growing every day.
Significant growth of online business using a specialized digital marketing platform: a solution for online sales.
Comments (0)