Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to Change the Position of Scrollbar using CSS ?

  • Last Updated : 30 Jul, 2021

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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: 

 

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

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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!