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
Introducing the tool to add a hyphen online and go to the next line according to the specified character, which can be a period or letters.
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.
Why am I still not attracting customers by producing content? There are various reasons why I am not attracting customers. We will examine them.
Examining the most important factors and 10 common website design mistakes that cause customer loss and how to fix them.
Website design services in Uzbekistan by the first comprehensive digital marketing platform in Iran, specializing in designing all types
Growing a business through an online store involves various things that we will examine. How does an online store grow a business?
Comments (0)