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 some Instagram posts generate sales, with practical tips on audience persona, content value, storytelling, visuals, CTA, and consistency.
Complete guide to bringing customers back to your Instagram page with continuous engagement, valuable content, stories, special offers, and loyalty boosting.
why Instagram sales suddenly drop and learn practical ways to recover through better audience insights, improved content, and stronger engagement.
What are Time-of-Flight (TOF Camera) depth sensors? Learn their principles, applications, advanced technologies, and challenges in various industries.
Comments (0)