How to Change the Position of Scrollbar using CSS ?

The features of the scroll-bar can be controlled by the use of CSS. Earlier it was not possible but with new versions of CSS made it possible for the web-designer. We can use CSS “::-webkit-scrollbar” property which is responsible for changing the shape, colour, 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 looks better.

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

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



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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 bottom position of scrool-bar and top position of scroll-bar code has been highlighted.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

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

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.