Scroll bars refer to elements that allow users to scroll through web content. It usually appears as a horizontal or vertical bar on the side or bottom of the page. The scroll bar is also called the "scroll bar thumb" and is the part of the scroll bar that moves when the user scrolls up and down.
In this article, we will discuss how to change the position of the scroll bar using CSS. We will cover the following topics -
Create a new class for the element
Positioning scroll bars and thumbs
Use the "position" property to change the position of the scroll bar
Create a new class for the element
First, we need to create a new class in CSS for the element where we want to change the scroll bar position. For example, if we want to change the scrollbar position of a div with 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 of the "scrollable-div" element and set the width to 5 pixels and the background color to light gray.
Positioning the thumb of the scroll bar
In this step, our target is the thumb of the scroll bar. The thumb is the part of the scroll bar that moves when the user scrolls. We will do this by adding the following code to the CSS class -
::-webkit-scrollbar-thumb {
background-color: #000000;
}
This will change the color of the thumb to black.
Use the "position" attribute to change the position of the scroll bar
In the final step, we will use the "position" property to change the position of the scroll bar. For example, if we wanted to position the scrollbar to the left of the "scrollable-div" element, we would use the following code -
.scrollable-div::-webkit-scrollbar {
position: absolute;
left: 0;
}
This will position the scrollbar to the left of the "scrollable-div" element.
Example
This example places the scrollbar to the left 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 id="The-scroll-bar-on-the-Left-side-of-the-div-element">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 places the scrollbar to the right 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 id="The-scroll-bar-on-the-right-side-of-the-div-element">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>
in conclusion
Changing the position of the scroll bar using CSS is a simple process and can be done by creating a new class for the element, positioning the scroll bar and slider, and then using the "position" property to change the position of the scroll bar. With a little CSS knowledge and some experimentation, we can create a unique custom look for our website.
The above is the detailed content of How to change the position of the scroll bar using CSS?. For more information, please follow other related articles on the PHP Chinese website!
Weekly Platform News: Web Apps in Galaxy Store, Tappable Stories, CSS SubgridApr 14, 2025 am 11:20 AMIn this week's roundup: Firefox gains locksmith-like powers, Samsung's Galaxy Store starts supporting Progressive Web Apps, CSS Subgrid is shipping in Firefox
Weekly Platform News: Internet Explorer Mode, Speed Report in Search Console, Restricting Notification PromptsApr 14, 2025 am 11:15 AMIn this week's roundup: Internet Explorer finds its way into Edge, Google Search Console touts a new speed report, and Firefox gives Facebook's notification
The Power (and Fun) of Scope with CSS Custom PropertiesApr 14, 2025 am 11:11 AMYou’re probably already at least a little familiar with CSS variables. If not, here’s a two-second overview: they are really called custom properties, you set
We Are ProgrammersApr 14, 2025 am 11:04 AMBuilding websites is programming. Writing HTML and CSS is programming. I am a programmer, and if you're here, reading CSS-Tricks, chances are you're a
How Do You Remove Unused CSS From a Site?Apr 14, 2025 am 10:59 AMHere's what I'd like you to know upfront: this is a hard problem. If you've landed here because you're hoping to be pointed at a tool you can run that tells
An Introduction to the Picture-in-Picture Web APIApr 14, 2025 am 10:57 AMPicture-in-Picture made its first appearance on the web in the Safari browser with the release of macOS Sierra in 2016. It made it possible for a user to pop
Ways to Organize and Prepare Images for a Blur-Up Effect Using GatsbyApr 14, 2025 am 10:56 AMGatsby does a great job processing and handling images. For example, it helps you save time with image optimization because you don’t have to manually
Oh Hey, Padding Percentage is Based on the Parent Element's WidthApr 14, 2025 am 10:55 AMI learned something about percentage-based (%) padding today that I had totally wrong in my head! I always thought that percentage padding was based on the
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Dreamweaver CS6
Visual web development tools
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
Dreamweaver Mac version
Visual web development tools
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
