Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to change the position of the scrollbar using CSS?
To change the position of the scrollbar using CSS, you can use various CSS properties like direction, transform, and overflow. By default, scrollbars appear on the right (vertical) and bottom (horizontal), but these positions can be modified.
Syntax
/* For left-side scrollbar */
selector {
direction: rtl;
}
/* For rotated scrollbar positions */
selector {
transform: rotate(180deg);
}
/* For overflow-based scrollbars */
selector {
overflow-x: auto; /* horizontal scrollbar */
overflow-y: auto; /* vertical scrollbar */
}
Method 1: Left-Side Scrollbar Using Direction Property
The direction property changes text direction and moves the scrollbar to the left side. Use direction: rtl on the parent and direction: ltr on the child to maintain normal text flow
<!DOCTYPE html>
<html>
<head>
<style>
.scrollable-div {
height: 150px;
width: 250px;
overflow-y: auto;
background-color: #4CAF50;
color: white;
margin: 20px auto;
padding: 10px;
direction: rtl;
}
.content {
direction: ltr;
}
</style>
</head>
<body>
<div class="scrollable-div">
<div class="content">
CSS is the acronym for "Cascading Style Sheet".
It's a style sheet language used for describing
the presentation of a document written in HTML.
CSS helps web developers control layout and
visual aspects of web pages. It plays a crucial
role in modern web development by providing tools
to create visually appealing and responsive websites.
</div>
</div>
</body>
</html>
A green box with text content appears with the vertical scrollbar positioned on the left side instead of the default right side.
Method 2: Left-Side Scrollbar Using Transform Property
The transform property rotates the container 180 degrees, moving the scrollbar to the left. The inner content is rotated back to appear normal
<!DOCTYPE html>
<html>
<head>
<style>
.scrollable-div {
height: 150px;
width: 250px;
overflow-y: auto;
background-color: #2196F3;
color: white;
margin: 20px auto;
padding: 10px;
transform: rotate(180deg);
}
.content {
transform: rotate(-180deg);
}
</style>
</head>
<body>
<div class="scrollable-div">
<div class="content">
CSS is the acronym for "Cascading Style Sheet".
It's a style sheet language used for describing
the presentation of a document written in HTML.
CSS helps web developers control layout and
visual aspects of web pages.
</div>
</div>
</body>
</html>
A blue box with text content appears with the vertical scrollbar positioned on the left side, achieved through rotation transformation.
Method 3: Bottom Scrollbar
The overflow-x: auto property creates a horizontal scrollbar at the bottom when content overflows horizontally
<!DOCTYPE html>
<html>
<head>
<style>
.scrollable-div {
width: 250px;
height: 100px;
overflow-x: auto;
background-color: #FF9800;
color: white;
margin: 20px auto;
padding: 10px;
}
.content {
width: 400px;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="scrollable-div">
<div class="content">
This is a long line of text that will overflow horizontally and create a bottom scrollbar.
</div>
</div>
</body>
</html>
An orange box with a horizontal scrollbar at the bottom appears, allowing horizontal scrolling of the overflowing text content.
Method 4: Top Scrollbar
Combine overflow-x: auto with transform: rotate(180deg) to move the horizontal scrollbar to the top
<!DOCTYPE html>
<html>
<head>
<style>
.scrollable-div {
width: 250px;
height: 100px;
overflow-x: auto;
background-color: #9C27B0;
color: white;
margin: 20px auto;
padding: 10px;
transform: rotate(180deg);
}
.content {
width: 400px;
white-space: nowrap;
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class="scrollable-div">
<div class="content">
This long text creates a top scrollbar through rotation transformation.
</div>
</div>
</body>
</html>
A purple box with a horizontal scrollbar at the top appears, achieved by rotating the container and content.
Method 5: Right-Side Scrollbar (Default)
The overflow-y: auto property creates a vertical scrollbar on the right side, which is the default behavior
<!DOCTYPE html>
<html>
<head>
<style>
.scrollable-div {
height: 150px;
width: 250px;
overflow-y: auto;
background-color: #607D8B;
color: white;
margin: 20px auto;
padding: 10px;
}
</style>
</head>
<body>
<div class="scrollable-div">
CSS is the acronym for "Cascading Style Sheet".
It's a style sheet language used for describing
the presentation of a document written in HTML.
CSS helps web developers control layout and
visual aspects of web pages. It plays a crucial
role in modern web development.
</div>
</body>
</html>
A gray box with text content appears with the vertical scrollbar positioned on the right side (default position).
Conclusion
Changing scrollbar positions in CSS can be achieved using the direction property for left-side placement, transform rotations for custom positioning, and overflow properties for standard horizontal/vertical scrollbars. These techniques provide flexibility in creating unique scrolling experiences for web interfaces.
53K+ Views
