How to Change the Position of Scrollbar using CSS ?

10 May, 2022
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.
anjalishyamjith05
hardikkoriintern
CSS-Misc
HTML-Misc
Picked
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.