Open In App

How to Change the Position of Scrollbar using CSS ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The features of the scroll bar can be controlled by the use of CSS. Earlier it was not possible but new versions of CSS made it possible for the web designer. We can use the CSS “::-webkit-scrollbar” property which is responsible for changing the shape, color, size, shade, shadow, etc. of the scroll bar. But, here the property which we will use is the direction property of CSS for changing the position of the scroll bar.

Note: Adding basic CSS property to the scroll bar in every example to make it look better.

Example 1: This example placing the scroll bar on the right-hand side of the div element (By default Condition).

HTML




<!DOCTYPE html>
<html>
     
<head>
    <title>Customize the scroll-bar</title>
 
    <style>
        body {
            text-align: center;
        }
         
         
        /* Set the style of container
            div element */
        .Container{
            height: 150px;
            width: 250px;
            overflow-y: auto;
            background-color: green;
            border-radius: 5px;
            margin: 0 auto;
        }
        /* Set the effects to the division
            named content */
        .Content{
            height: 200px;
            color: white;
            text-align: center;
        }
         
        /* Designing for scroll-bar */
        ::-webkit-scrollbar {
            width: 6px;
        }
     
        /* Track */
        ::-webkit-scrollbar-track {
            background: gainsboro;
            border-radius: 5px;
        }
     
        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: black;
            border-radius: 5px;
        }
     
        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
    </style>
</head>
 
<body>
    <h1 style="color:forestgreen;">
        GeeksforGeeks
    </h1>
     
    <div class="Container">
        <div class="Content">
            GeeksforGeeks is a Computer Science
            portal for geeks. It contains well
            written, well thought and well
            explained computer science and
            programming articles, quizzes etc.
        </div>
    </div>
</body>
 
</html>


Output: The output contains a black color scroll bar on the right side of the division. 
 

Example 2: Placing the scroll bar on the left side of the div element. The difference between the right side scroll-bar and left side scroll-bar code has been highlighted 

HTML




<!DOCTYPE html>
<html>
     
<head>
    <title>Customize the scroll-bar</title>
 
    <style>
        body {
            text-align: center;
        }
        .Container{
            height: 150px;
            width: 250px;
            overflow-y: auto;
            background-color: green;
            border-radius: 5px;
            margin: 0 auto;
        }
         
        .Content{
            height: 200px;
            color: white;
            text-align: center;
             
            /* This property print the content
                from left to right */
            direction: ltr;
        }
         
        /*This cause the division content
        to be displayed from right to left */
        .Flipped{
            direction: rtl;
        }
     
        /* Designing for scroll-bar */
        ::-webkit-scrollbar {
            width: 6px;
        }
     
        /* Track */
        ::-webkit-scrollbar-track {
            background: gainsboro;
            border-radius: 5px;
        }
     
        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: black;
            border-radius: 5px;
        }
     
        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
    </style>
</head>
 
<body>
    <h1 style="color:forestgreen;">
        GeeksforGeeks
    </h1>
     
    <div class="Container Flipped">
        <div class="Content">
            GeeksforGeeks is a Computer Science
            portal for geeks. It contains well
            written, well thought and well
            explained computer science and
            programming articles, quizzes etc.
        </div>
    </div>
</body>
 
</html>


Output: The black color scroll bar is displaying on the left side of the div element. 
 

Example 3: Placing the scroll bar on the bottom of the division.

HTML




<!DOCTYPE html>
<html>
     
<head>
    <title>Customize the scroll-bar</title>
     
    <style>
        body {
            text-align: center;
        }
        .Container{
            height: 150px;
            width: 250px;
            overflow-y: auto;
            background-color: green;
            border-radius: 5px;
            margin: 0 auto;
        }
         
        .Content{
            width: 300px;
            color: white;
            text-align: center;
        }
         
        /* Designing for scroll-bar */
        ::-webkit-scrollbar {
            width: 5px;
        }
     
        /* Track */
        ::-webkit-scrollbar-track {
            background: gainsboro;
            border-radius: 5px;
        }
     
        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: black;
            border-radius: 5px;
        }
     
        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
    </style>
</head>
 
<body>
    <!-- HTML Code -->
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
     
    <div class="Container">
        <div class="Content">
            GeeksforGeeks is a Computer Science
            portal for geeks. It contains well
            written, well thought and well
            explained computer science and
            programming articles, quizzes etc.
        </div>
    </div>
</body>
 
</html>


Output: The black color scroll bar is displaying on the bottom of the div element. 

Example 4: Placing the scroll bar on the top of the div element. The difference between the bottom position of the scroll-bar and the top position of the scroll-bar code has been highlighted.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Customize the scroll-bar</title>
     
    <style>
        body {
            text-align: center;
        }
        .Container{
            height: 150px;
            width: 250px;
            overflow-y: auto;
            background-color: green;
            border-radius: 5px;
            margin: 0 auto;
        }
         
        .Content{
            width: 300px;
            color: white;
            text-align: center;
        }
         
        .Flipped, .Flipped .Content{
            transform: rotateX(180deg);
        }
         
        /* Designing for scroll-bar */
        ::-webkit-scrollbar {
            width: 5px;
        }
     
        /* Track */
        ::-webkit-scrollbar-track {
            background: gainsboro;
            border-radius: 5px;
        }
     
        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: black;
            border-radius: 5px;
        }
     
        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
     
    <div class="Container Flipped">
        <div class="Content">
            GeeksforGeeks is a Computer Science
            portal for geeks. It contains well
            written, well thought and well
            explained computer science and
            programming articles, quizzes etc.
        </div>
    </div>
</body>
 
</html>


Output: The black color scroll bar is displaying on the top of the container div element. 

Note: Using HTML and CSS can also change the position of the scroll bar of the webpage from the right to the left side of the page.

Example 5: Placing the scroll bar on the left side of the whole page.

HTML




<!DOCTYPE html>
<html>
     
<head>
    <title>Customize the scroll-bar</title>
     
    <style>
        h1 {
            color: green;
            text-align: center;
        }
         
        /* Styling each content
            division in the page */
        .content1{
            background-color: orange;
            overflow: auto;
            border-radius: 5px;
            text-align: center;
        }
        .content2{
            background-color: dodgerblue;
            overflow: auto;
            border-radius: 5px;
            text-align: center;
        }
        .content3{
            background-color: blueviolet;
            overflow: auto;
            border-radius: 5px;
            text-align: center;
        }
        .content4{
            background-color: tomato;
            overflow: auto;
            border-radius: 5px;
            text-align: center;
        }
        .content5{
            background-color: crimson;
            overflow: auto;
            border-radius: 5px;
            text-align: center;
        }
        .content6{
            background-color: lawngreen;
            overflow: auto;
            border-radius: 5px;
            text-align: center;
        }
         
        /* Designing for scroll-bar */
        ::-webkit-scrollbar {
            width: 5px;
        }
     
        /* Track */
        ::-webkit-scrollbar-track {
            background: gainsboro;
            border-radius: 5px;
        }
     
        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: black;
            border-radius: 5px;
        }
     
        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
     
    <div class="content1">
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
    </div>
    <br>
    <div class="content2">
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
    </div>
    <br>
    <div class="content3">
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
    </div>
    <br>
    <div class="content4">
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
    </div>
    <br>
    <div class="content5">
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
    </div>
    <br>
    <div class="content6">
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
    </div>
</body>
 
</html>


Output: 

Example 6: The difference between both the codes is been highlighted. 

HTML




<!DOCTYPE html>
<html>
     
<head>
    <title>Customize the scroll-bar</title>
     
    <style>
        h1 {
            color: green;
            text-align: center;
        }
         
        /* Styling each content
            division in the page */
        .content1{
            background-color: orange;
            overflow: auto;
            border-radius: 5px;
            text-align: center;
        }
        .content2{
            background-color: dodgerblue;
            overflow: auto;
            border-radius: 5px;
            text-align: center;
        }
        .content3{
            background-color: blueviolet;
            overflow: auto;
            border-radius: 5px;
            text-align: center;
        }
        .content4{
            background-color: tomato;
            overflow: auto;
            border-radius: 5px;
            text-align: center;
        }
        .content5{
            background-color: crimson;
            overflow: auto;
            border-radius: 5px;
            text-align: center;
        }
        .content6{
            background-color: lawngreen;
            overflow: auto;
            border-radius: 5px;
            text-align: center;
        }
        /* Designing for scroll-bar */
        ::-webkit-scrollbar {
            width: 5px;
        }
     
        /* Track */
        ::-webkit-scrollbar-track {
            background: gainsboro;
            border-radius: 5px;
        }
     
        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: black;
            border-radius: 5px;
        }
     
        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
        body {
            direction: rtl;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
     
    <div class="content1">
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
    </div>
    <br>
    <div class="content2">
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
    </div>
    <br>
    <div class="content3">
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
    </div>
    <br>
    <div class="content4">
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
    </div>
    <br>
    <div class="content5">
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
    </div>
    <br>
    <div class="content6">
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
        GeeksforGeeks is a Computer Science
        portal for geeks. It contains well
        written, well thought and well
        explained computer science and
        programming articles, quizzes etc.
    </div>
</body>
 
</html>


Output: 

 

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.



Last Updated : 10 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads