How to change the position of the scrollbar using CSS?

To change the position of the scrollbar using CSS, there are various approaches which can be implemented to change scrollbar position and can be placed in any of four directions.

In this article we are having div elements with text content inside it. Our task is to change the position of scrollbar in different direction. We will be changing the scrollbar position to right, left, top and bottom.

Approaches to Change the Position of the Scrollbar

Here is a list of approaches to change the position of the scrollbar using CSS which we will be discussing in this article with stepwise explaination and complete example codes.

Placing scrollbar on left Side using direction Property

In this approach, we will be placing scrollbar on left Side. For this we have used direction property which specifies direction of the content written within div element.

  • we have used "direction: rtl" in parent div element that is in 'scrollable-div' which sets the direction of content in parent from right-to-left includeing the scroll bar.
  • we have used "direction: ltr;" in child div element that is in 'scrollable-div-inside' which sets the text-direction of written content in div back to left-to-right.

Example

Here is a complete example code implementing above mentioned steps for placing scrollbar on left side of the div element using direction property.

<html>
<head>
    <title>
        Placing scroll bar on left side of div element
    </title>
    <style>
        body {
            text-align: center;
        }
        .scrollable-div {
            height: 150px;
            width: 250px;
            overflow-y: auto;
            background-color: #04af2f;
            color: white;
            margin: auto;
            padding: 5px;
            direction: rtl;
        }
        .scrollable-div-inside {
            direction: ltr;
        }
    </style>
</head>
<body>
    <h3>
        Change the position of the scrollbar using CSS
    </h3>
    <p>
        In this example we have used overflow-y 
        and direction properties to change the 
        position of the scrollbar using CSS.
    </p>
    <div class="scrollable-div">
        <div class="scrollable-div-inside">
            CSS is the acronym for "Cascading Style Sheet".
            It's a style sheet language used for describing
            the presentation of a document written in a
            markup language like HTML. CSS helps the web
            developers to control the layout and other
            visual aspects of the web pages. CSS plays a
            crucial role in modern web development by
            providing the tools necessary to create
            visually appealing, accessible, and
            responsive websites.
        </div>
    </div>
</body>
</html>

Placing scrollbar on left Side using transform Property

In this approach, we will be placing scrollbar on left Side. For this we have used transform property which applies rotation to the content written within div element to place scroll bar to left side of div element.

  • We have used "transform: rotate(180deg);" in parent div element that is in 'scrollable-div' which rotates the content of parent div element by 180 degree placing thr scroll bar to left side and rotating the written text upside down.
  • We have used "transform: rotate(-180deg);" in child div element that is in 'scrollable-div-inside' which rotates back only the written content back to normal leaving scroll bar placed on left side.

Example

Here is a complete example code implementing above mentioned steps for placing scrollbar on left side of the div element using transform property.

<html>
<head>
    <title>
        Placing scroll bar on left side of div element
    </title>
    <style>
        body {
            text-align: center;
        }
        .scrollable-div {
            height: 150px;
            width: 250px;
            overflow-y: auto;
            background-color: #04af2f;
            color: white;
            margin: auto;
            padding: 5px;
            transform: rotate(180deg); 
        }
        .scrollable-div-inside {
            transform: rotate(-180deg);
        }
    </style>
</head>
<body>
    <h3>
        Change the position of the scrollbar using CSS
    </h3>
    <p>
        In this example we have used overflow-y 
        and transform properties to change the 
        position of the scrollbar using CSS.
    </p>
    <div class="scrollable-div">
        <div class="scrollable-div-inside">
            CSS is the acronym for "Cascading Style Sheet".
            It's a style sheet language used for describing
            the presentation of a document written in a
            markup language like HTML. CSS helps the web
            developers to control the layout and other
            visual aspects of the web pages. CSS plays a
            crucial role in modern web development by
            providing the tools necessary to create
            visually appealing, accessible, and
            responsive websites.
        </div>
    </div>
</body>
</html>

Placing scrollbar on Bottom

To change the position of the scrollbar, We have placed scroll bar in bottom direction. The Overflow-x property adds a scroll bar to the bottom of div element.

  • We have used "overflow-x: auto;" property to place scroll bar at the bottom of div element.
  • The overflow-x property places the scroll bar at bottom when content of div Overflows at left and right edges.

Example

Here is a complete example code implementing above mentioned steps for placing scrollbar at bottom of the div element.

<html>
<head>
    <title>
        Placing scroll bar on bottom of div element
    </title>
    <style>
        body {
            text-align: center;
        }
        .scrollable-div {
            width: 250px;
            height: 200px;
            overflow-x: auto;
            background-color: #04af2f;
            color: white;
            margin: auto;
            padding: 5px;
        }
        .scrollable-div-inside {
            width: 350px;
        }
    </style>
</head>
<body>
    <h3>
        Change the position of the scrollbar using CSS
    </h3>
    <p>
        In this example we have used overflow-x
        property to change the position of the 
        scrollbar using CSS.
    </p>
    <div class="scrollable-div">
        <div class="scrollable-div-inside">
            CSS is the acronym for "Cascading Style Sheet".
            It's a style sheet language used for describing
            the presentation of a document written in a
            markup language like HTML. CSS helps the web
            developers to control the layout and other
            visual aspects of the web pages. CSS plays a
            crucial role in modern web development by
            providing the tools necessary to create
            visually appealing, accessible, and
            responsive websites.
        </div>
    </div>
</body>
</html>

Placing scrollbar on Top

In this approach, we will be placing scrollbar on left Side. For this we have used overflow-x and transform property which applies rotation to the content written within div element to place scroll bar at top of div element.

  • We have used "overflow-x: auto;" property which clips content of div when Overflows at left and right edges.
  • We have used "transform: rotate(180deg);" in parent div element that is in 'scrollable-div' which rotates the content of parent div element by 180 degree placing thr scroll bar at the top and rotating the written text upside down.
  • We have used "transform: rotate(-180deg);" in child div element that is in 'scrollable-div-inside' which rotates back only the written text back to normal leaving scroll bar placed at the top of div element.

Example

Here is a complete example code implementing above mentioned steps for placing scrollbar at the top of div element using transform property.

<html>
<head>
    <title>
        Placing scroll bar on top of div element
    </title>
    <style>
        body {
            text-align: center;
        }
        .scrollable-div {
            width: 250px;
            height: 200px;
            overflow-x: auto;
            background-color: #04af2f;
            color: white;
            margin: auto;
            padding: 5px;
            transform: rotate(180deg);
        }
        .scrollable-div-inside {
            width: 350px;
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
    <h3>
        Change the position of the scrollbar using CSS
    </h3>
    <p>
        In this example we have used overflow-x
        and transform properties to change the
        position of the scrollbar using CSS.
    </p>
    <div class="scrollable-div">
        <div class="scrollable-div-inside">
            CSS is the acronym for "Cascading Style Sheet".
            It's a style sheet language used for describing
            the presentation of a document written in a
            markup language like HTML. CSS helps the web
            developers to control the layout and other
            visual aspects of the web pages. CSS plays a
            crucial role in modern web development by
            providing the tools necessary to create
            visually appealing, accessible, and
            responsive websites.
        </div>
    </div>
</body>
</html>

Placing scrollbar on Right Side

To change the position of the scrollbar, We have placed scroll bar in right direction. It is the default position of scroll bar when created. The Overflow property adds a scroll bar to div element.

  • We have used "overflow-y: auto;" property to create a scroll bar and place it in right direction.
  • The overflow-y property adds a scroll bar when content of div Overflows at top and bottom edges.

Example

Here is a complete example code implementing above mentioned steps for placing scrollbar on right side of the div element.

<html>
<head>
    <title>
        Placing scroll bar on right side of div element
    </title>
    <style>
        body {
            text-align: center;
        }
        .scrollable-div {
            height: 150px;
            width: 250px;
            overflow-y: auto;
            background-color: #04af2f;
            color: white;
            margin: auto;
            padding: 5px;
        }
    </style>
</head>
<body>
    <h3>
        Change the position of the scrollbar using CSS
    </h3>
    <p>
        In this example we have used overflow-y 
        property to change the position of the 
        scrollbar using CSS.
    </p>
    <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 a 
        markup language like HTML. CSS helps the web 
        developers to control the layout and other 
        visual aspects of the web pages. CSS plays a 
        crucial role in modern web development by 
        providing the tools necessary to create 
        visually appealing, accessible, and 
        responsive websites.
    </div>
</body>
</html>

Conclusion

To change the position of a scrollbar using CSS is a simple process. In this article we have discussed five approaches to place the scroll bar at different positions which are by using CSS overflow-x, overflow-y and transform properties.

Updated on: 2024-07-10T14:59:26+05:30

52K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements