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 change the position of the scrollbar using CSS?
A scrollbar refers to the element that allows a user to scroll through the content of a web page. It usually appears as a horizontal or vertical bar on the side or bottom of the page. The scrollbar is also known as the "scrollbar thumb," which is the part of the scrollbar that moves when the user scrolls up and down.
In this article, we will discuss how to change the position of a scrollbar using CSS. We will cover the following topics −
Creating a new class for the element
Targeting the scrollbar and the thumb
Using the "position" property to change the position of the scrollbar
Creating a new class for the element
First, we will need to create a new class in CSS for the element that we want to change the scrollbar position for. For example, if we want to change the position of the scrollbar for a div with the class "scrollablediv," we will create the following class in CSS -
.scrollable-div { CSS Code……. } ::-webkit-scrollbar { width: 5px; background-color: #F5F5F5; }
This class will target the scrollbar for the "scrollable-div" element and set the width to 5 pixels and the background color to a light gray.
Targeting the thumb of the scrollbar
In this step, we target the thumb of the scrollbar. The thumb is the part of the scrollbar that moves when the user scrolls. We will do this by adding the following code to CSS class −
::-webkit-scrollbar-thumb { background-color: #000000; }
This will change the color of the thumb to black.
Using the "position" property to change the position of the scrollbar
In this final step, we will change the position of the scrollbar by using the "position" property. For example, if we want to position the scrollbar on the left side of the "scrollable-div" element, we will use the following code −
.scrollable-div::-webkit-scrollbar { position: absolute; left: 0; }
This will position the scrollbar on the left side of the "scrollable-div" element.
Example
This example puts the scroll bar on the Left-hand side of the div element.
<html>
<title>The scroll bar on the left-hand side of the div element</title>
<head>
<style>
body{
text-align:center;
}
.scrollable-div{
height: 150px;
width: 250px;
overflow-y: auto;
background-color:pink;
margin:auto;
padding:5px;
transform: rotate(180deg);
}
.scrollable-div-inside {
transform: rotate(-180deg);
}
.scrollable-div::-webkit-scrollbar {
width: 5px; /* Set the width of the scrollbar */
background-color: #F5F5F5; /* Set the background color of the scrollbar */
position: absolute;
right: 0; /* Position the scrollbar on the right of the element*/
}
.scrollable-div::-webkit-scrollbar-thumb {
background-color: #000000; /* Set the color of the thumb */
}
::-webkit-scrollbar-track {
background: red;
border-radius: 5px;
}
</style>
</head>
<body>
<h3>The scroll bar on the Left side of the div element</h3>
<div class="scrollable-div">
<div class="scrollable-div-inside">Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
</div>
</body>
</html>
Example
This example puts the scroll bar on the right-hand side of the div element.
<html>
<title>The scroll bar on the right-hand side of the div element</title>
<head>
<style>
body{
text-align:center;
}
.scrollable-div{
height: 150px;
width: 250px;
overflow-x: auto;
background-color:pink;
margin:auto;
padding:5px;
}
.scrollable-div::-webkit-scrollbar {
width: 5px; /* Set the width of the scrollbar */
background-color: #F5F5F5; /* Set the background color of the scrollbar */
position: absolute;
left: 0; /* Position the scrollbar on the left of the element */
}
.scrollable-div::-webkit-scrollbar-thumb {
background-color: #000000; /* Set the color of the thumb */
}
::-webkit-scrollbar-track {
background: red;
border-radius: 5px;
}
</style>
</head>
<body>
<h3>The scroll bar on the right side of the div element</h3>
<div class="scrollable-div">Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </div>
</body>
</html>
Conclusion
Changing the position of a scrollbar using CSS is a simple process that can be done by creating a new class for the element, targeting the scrollbar and the thumb, and then using the "position" property to change the position of the scrollbar. With a little bit of CSS knowledge and some experimentation, we can create a unique and custom look for the website.
33K+ Views
