Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to style scrollbar thumb for the webkit browsers and what are components of scrollbar?
Scrollbars are an essential part of web browsing, allowing users to navigate through long pages of content. Webkit-based browsers such as Safari and Google Chrome offer several ways to style scrollbar thumbs, which are the draggable handles that move up and down the scrollbar track.
Scroll bars are an essential feature for any window that displays content extending beyond its borders. The inclusion of a scroll bar provides users with a means of navigating through the content of the client area. A scroll bar's orientation is responsible for determining the direction in which scrolling occurs when the user interacts with it.
Horizontal scroll bars, as the name suggests, enable users to scroll the content of a window horizontally, allowing them to move the content to the left or right. Vertical scroll bars, on the other hand, allow users to scroll the content vertically, enabling them to navigate through the content up or down.
In this article, we'll learn how to style scrollbar thumbs for Webkit browsers and explore the different components of a scrollbar.
Components of a Scrollbar
A scrollbar consists of several parts which include the track, thumb, arrows, and buttons. A scroll bar consists of a shaded shaft with an arrow button at each end i.e., the top and bottom, and a scroll box (sometimes known as a thumb) between the arrow buttons.
A scroll bar represents the overall length or width of a data object in the area of the user window, the scroll box represents the portion of the object that is visible in the client area.
Note that the position of the scroll box gets changes when the user scrolls a data object to display a different part of it. Buttons, on the other side, are used to jump to the previous or next page or to the beginning or end of the content.
Methods to Style Scrollbar Thumb
There are various ways through which we can style our scrollbar thumb in CSS. Let’s discuss some of the common ways to style it.
Method 1: Using Webkit Vendor Prefixes
In this method, we use the Webkit vendor prefixes and note that this is only compatible with Webkit-based browsers like google chrome, edge, etc and requires adding the following CSS code to the stylesheet. Below is the syntax.
Syntax
::-webkit-scrollbar-thumb {
background-color: green;
/* other CSS styles for scrollbar thumb */
}
Example
<html>
<head>
<title>Example to style the scrollbar thumb using Webkit Vendor Prefixes</title>
<style>
::-webkit-scrollbar-thumb {
background-color: green;
border-radius: 12px;
padding: 2px;
margin: none;
}
</style>
</head>
<body>
<h2>Example to style the scrollbar thumb using Webkit Vendor Prefixes</h2>
<p>
Tutorials Point was founded on the premise that there is a segment of readers who find online content more accessible and preferable when it comes to acquiring new skills at their own pace from the comfort of their homes. The journey began with the creation of a single tutorial on HTML in 2006. Encouraged by the positive response to the tutorial, we continued to expand our repository by adding new tutorials on a variety of subjects. Our current collection boasts a wealth of tutorials and articles on topics ranging from programming languages and web design to academics and much more.
</p>
</body>
</html>
Method 2: Using Webkit Scrollbar Pseudo-elements
In this method, we use the Webkit Scrollbar Pseudo-elements and note that this is only compatible with Webkit-based browsers like google chrome, edge, etc, and requires adding the following CSS code to the stylesheet. Below is the syntax.
Syntax
::-webkit-scrollbar {
width: 20px;
/* other CSS styles for scrollbar thumb */
}
::-webkit-scrollbar-thumb {
background-color: blue;
border-radius: 5px;
/* other CSS styles for scrollbar thumb */
}
Example
<html>
<head>
<title>Example to style the scrollbar thumb using Webkit Scrollbar Pseudo-elements</title>
<style>
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-thumb {
background-color: green;
border-radius: 12px;
}
</style>
</head>
<body>
<h2>Example to style the scrollbar thumb using Webkit Scrollbar Pseudo-elements</h2>
<p>
Tutorials Point was founded on the premise that there is a segment of readers who find online content more accessible and preferable when it comes to acquiring new skills at their own pace from the comfort of their homes. The journey began with the creation of a single tutorial on HTML in 2006. Encouraged by the positive response to the tutorial, we continued to expand our repository by adding new tutorials on a variety of subjects. Our current collection boasts a wealth of tutorials and articles on topics ranging from programming languages and web design to academics and much more.
</p>
</body>
</html>
Method 3: Using JavaScript to Style Custom Scrollbar
In this method, we design and use the custom scrollbars with JavaScript. Note that, this method is compatible with all browsers. See the below syntax to use the javascript code for the webpage.
Syntax
<style>
.scrollbar {
overflow: auto;
height: 250px;
width: 350px;
background-color: blue;
padding: 5px;
}
.thumb {
background-color: green;
height: 15px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>
var scrollbar = document.querySelector('.scroll-thumb');
scroll-thumb.addEventListener('scroll', function() {
var mythumb = scrollbar.querySelector('.mythumb');
var mypercent = scrollbar.scrollTop / (scrollbar.scrollHeight - scrollbar.clientHeight);
var mythumbHeight = Math.floor(scrollbar.clientHeight * percent);
mythumb.style.height = mythumbHeight + 'px';
});
Example
<html>
<head>
<title>Example to style the scrollbar thumb using JavaScript</title>
<style>
.myscrollbar {
overflow: auto;
height: 200px;
width: 300px;
background-color: #eee;
padding: 10px;
}
.mythumb {
height: 20px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<h2>Example to style the scrollbar thumb using JavaScript</h1>
<div class="myscrollbar">
<div class="mythumb"></div>
<p>
Tutorials Point was founded on the premise that there is a segment of readers who find online content more accessible and preferable when it comes to acquiring new skills at their own pace from the comfort of their homes. The journey began with the creation of a single tutorial on HTML in 2006. Encouraged by the positive response to the tutorial, we continued to expand our repository by adding new tutorials on a variety of subjects. Our current collection boasts a wealth of tutorials and articles on topics ranging from programming languages and web design to academics and much more.
</p>
</div>
<script>
var myscrollbar = document.querySelector('.myscrollbar');
var mythumb = scrollbar.querySelector('.mythumb');
myscrollbar.addEventListener('scroll', function() {
var mythumbPosition = myscrollbar.scrollTop / (myscrollbar.scrollHeight - myscrollbar.clientHeight) * (myscrollbar.clientHeight - mythumb.clientHeight);
mythumb.style.top = mythumbPosition + 'px';
});
</script>
</body>
</html>
Conclusion
In this article, we learned how to style the scrollbar thumb for WebKit browsers and saw the different components of a scrollbar. We learned the different methods to style the scrollbar thumb for Webkit browsers. The first method uses Webkit vendor prefixes to directly style the scrollbar thumb. The second method uses Webkit scrollbar pseudo-elements to style the thumb and other scrollbar components. The third method involves creating a custom scrollbar with JavaScript and updating the position of the thumb manually. Each method has its advantages and disadvantages, and the choice of method will depend on the specific requirements of the project.
573 Views
