How to Change the Position of Scrollbar using CSS?

How to Change the Position of Scrollbar using CSS?

Last Updated : 20 Jun, 2025

Changing the position of the scrollbar using CSS can significantly enhance the user interface and user experience of your website. By default, scrollbars appear on the right side of the element, but with modern CSS techniques, you can customize their placement and appearance — especially for web apps and RTL (Right-to-Left) languages. Approximately 90% of developers rarely alter the scrollbar's position, yet 10% utilize such styling to improve accessibility or visual design in custom UI components.

Here are the Methods to Change the Position of the Scrollbar using CSS:

Method 1. Using the direction Property

The direction property specifies the text direction of an element's content. Setting it to rtl (right-to-left) moves the scrollbar to the left side.

index.html

<html>
<head>
    <style>
        .scroll-left {
            direction: rtl;
            overflow-y: scroll;
            height: 150px;
            width: 300px;
            border: 1px solid #000;
        }
        .content {
            direction: ltr;
        }
    </style>
</head>
<body>
    <div class="scroll-left">
        <div class="content">
            This is a sample Code 
        </div>
    </div>
</body>
</html>

Code Overview

The .scroll-left class applies direction: rtl; to move the scrollbar to the left.
The inner .content div resets the text direction to left-to-right with direction: ltr;.

2. Using the transform Property

The transform property can rotate elements, effectively repositioning the scrollbar.

index.hml

<html>
<head>
    <style>
        .scroll-left {
            transform: rotateY(180deg);
            overflow-y: scroll;
            height: 150px;
            width: 300px;
            border: 1px solid #000;
        }
        .content {
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <div class="scroll-left">
        <div class="content">
            This is sample code 
        </div>
    </div>
</body>
</html>

Code Overview

The .scroll-left class applies transform: rotateY(180deg); to flip the container, moving the scrollbar to the left.
The inner .content div reverses the flip to display content normally.

3. Using overflow-x and transform for Top Scrollbar

To position the scrollbar at the top, combine overflow-x with the transform property.

index.html

<html>
<head>
    <style>
        .scroll-top {
            overflow-x: auto;
            transform: rotate(180deg);
            height: 150px;
            width: 300px;
            border: 1px solid #000;
        }
        .content {
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
    <div class="scroll-top">
        <div class="content">
         This is a sample code 
        </div>
    </div>
</body>
</html>

Code Overview

The .scroll-top class applies transform: rotate(180deg); to flip the container, placing the scrollbar at the top.
The inner .content div reverses the flip to display content correctly.

How to Change the Position of Scrollbar using CSS?

A

aditya_taparia

Improve

Article Tags :

Similar Reads

How to get the position of scrollbar using JavaScript ?

JavaScript is an amazing language and there are many functions available through which we can access any element of the HTML page through javascript. There are some simple techniques to get the scrollbar position that are discussed below: Approach 1: Whenever the function getScroll() is encountered,

How to Change Style of Scrollbar using Tailwind CSS?

By default, Tailwind CSS does not include built-in utilities for styling scrollbars. However, you can customize the appearance of scrollbars using traditional CSS in combination with Tailwind's utility classes. This is achieved by using the scrollbar-* classes to customize aspects like scrollbar wid

How to Get and Set Scroll Position of an Element using JavaScript ?

In this article, we will learn how to get and set the scroll position of an HTML element using JavaScript.Approach: We will be using the HTML DOM querySelector() and addEventListener() methods and the HTML DOM innerHTML, scrollTop and scrollLeft properties.We create an HTML div element with an id of

How to make a Sidebar Sticky on Page Scroll using CSS ?

A Sticky Sidebar contains important links and navigation options fixed on the screen, making it easy for users to access them while scrolling down. This improves the user experience by saving them from scrolling back to the top of the page to find essential information. We have used two different wa

How to Create a Custom Scrollbar using CSS?

Scrollbars are common graphical user interface elements that allow users to navigate content beyond the visible area. By default, web browsers provide basic scrollbars with a predefined style. However, using HTML and CSS, you can customize the scrollbar to match your website's design better.Scrollba