How to change the position of the scroll bar using CSS?-CSS Tutorial-php.cn

How to change the position of the scroll bar using CSS?

WBOY

Release： 2023-08-26 16:09:04

forward

4980 people have browsed it

How to change the position of the scroll bar using CSS?

Scroll bars refer to elements that allow users to scroll through web content. It usually appears as a horizontal or vertical bar on the side or bottom of the page. The scroll bar is also called the "scroll bar thumb" and is the part of the scroll bar that moves when the user scrolls up and down.

In this article, we will discuss how to change the position of the scroll bar using CSS. We will cover the following topics -

Create a new class for the element
Positioning scroll bars and thumbs
Use the "position" property to change the position of the scroll bar

Create a new class for the element

First, we need to create a new class in CSS for the element where we want to change the scroll bar position. For example, if we want to change the scrollbar position of a div with class "scrollablediv", we will create the following class in CSS -

.scrollable-div {
   CSS Code…….
}
::-webkit-scrollbar {
   width: 5px;
   background-color: #F5F5F5;
}

Copy after login

This class will target the scrollbar of the "scrollable-div" element and set the width to 5 pixels and the background color to light gray.

Positioning the thumb of the scroll bar

In this step, our target is the thumb of the scroll bar. The thumb is the part of the scroll bar that moves when the user scrolls. We will do this by adding the following code to the CSS class -

::-webkit-scrollbar-thumb {
   background-color: #000000;
}

Copy after login

This will change the color of the thumb to black.

Use the "position" attribute to change the position of the scroll bar

In the final step, we will use the "position" property to change the position of the scroll bar. For example, if we wanted to position the scrollbar to the left of the "scrollable-div" element, we would use the following code -

.scrollable-div::-webkit-scrollbar {
   position: absolute;
   left: 0;
}

Copy after login

This will position the scrollbar to the left of the "scrollable-div" element.

Example

This example places the scrollbar to the left of the div element.

<html>
   <title>The scroll bar on the left-hand side of the div element</title>
   <head>
      <style>
         body{
            text-align:center;
         } 
         .scrollable-div{
            height: 150px;
            width: 250px;
            overflow-y: auto;
            background-color:pink;
            margin:auto;
            padding:5px;
            transform: rotate(180deg);
         }
         .scrollable-div-inside {
            transform: rotate(-180deg);
         }
         .scrollable-div::-webkit-scrollbar {
            width: 5px; /* Set the width of the scrollbar */
            background-color: #F5F5F5; /* Set the background color of the scrollbar */
            position: absolute;
            right: 0; /* Position the scrollbar on the right of the element*/
         }
         .scrollable-div::-webkit-scrollbar-thumb {
            background-color: #000000; /* Set the color of the thumb */
         }
         ::-webkit-scrollbar-track {
            background: red;
            border-radius: 5px;
         }
      </style>
   </head> 
   <body>
      <h3>The scroll bar on the Left side of the div element</h3>
      <div class="scrollable-div">
         <div class="scrollable-div-inside">Lorem Ipsum is simply dummy text of the printing
            and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 
            1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
      </div>
   </body>
</html>

Copy after login

Example

This example places the scrollbar to the right of the div element.

<html>
   <title>The scroll bar on the right-hand side of the div element</title>
   <head>
      <style>
         body{
            text-align:center;
         } 
         .scrollable-div{
            height: 150px;
            width: 250px;
            overflow-x: auto;
            background-color:pink;
            margin:auto;
            padding:5px;
         }
         .scrollable-div::-webkit-scrollbar {
            width: 5px; /* Set the width of the scrollbar */
            background-color: #F5F5F5; /* Set the background color of the scrollbar */
            position: absolute;
            left: 0; /* Position the scrollbar on the left of the element */
         }
         .scrollable-div::-webkit-scrollbar-thumb {
            background-color: #000000; /* Set the color of the thumb */
         }
         ::-webkit-scrollbar-track {
            background: red;
            border-radius: 5px;
         }
      </style>
   </head>
   <body>
      <h3>The scroll bar on the right side of the div element</h3>
      <div class="scrollable-div">Lorem Ipsum is simply dummy text of the printing and typesetting
         industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
         printer took a galley of type and scrambled it to make a type specimen book. It has survived not only
         five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </div>
   </body>
</html>

Copy after login

in conclusion

Changing the position of the scroll bar using CSS is a simple process and can be done by creating a new class for the element, positioning the scroll bar and slider, and then using the "position" property to change the position of the scroll bar. With a little CSS knowledge and some experimentation, we can create a unique custom look for our website.

The above is the detailed content of How to change the position of the scroll bar using CSS?. For more information, please follow other related articles on the PHP Chinese website!