如何使用 CSS 更改滚动条的位置?

cssweb developmentfront end technology更新于 2025/3/9 23:40:17

滚动条是指允许用户滚动浏览网页内容的元素。它通常显示为页面侧面或底部的水平或垂直条。滚动条也称为"滚动条缩略图"，它是滚动条的一部分，当用户上下滚动时会移动。

在本文中，我们将讨论如何使用 CSS 更改滚动条的位置。我们将涵盖以下主题:

为元素创建新类
定位滚动条和滑块
使用"position"属性更改滚动条的位置

为元素创建新类

首先，我们需要在 CSS 中为要更改滚动条位置的元素创建一个新类。例如，如果我们要更改带有"scrollablediv"类的 div 的滚动条位置，我们将在 CSS 中创建以下类:

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

此类将定位到"scrollable-div"元素的滚动条，并将宽度设置为 5 像素，背景颜色设置为浅灰色。

定位到滚动条的缩略图

在此步骤中，我们将定位到滚动条的缩略图。缩略图是滚动条中在用户滚动时移动的部分。我们将通过向 CSS 类添加以下代码来实现此目的 -

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

这会将滑块的颜色更改为黑色。

使用"position"属性更改滚动条的位置

在这最后一步中，我们将使用"position"属性更改滚动条的位置。例如，如果我们想将滚动条定位在"scrollable-div"元素的左侧，我们将使用以下代码 -

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

这会将滚动条定位到"scrollable-div"元素的左侧。

示例

此示例将滚动条放置在 div 元素的左侧。

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

示例

此示例将滚动条放在 div 元素的右侧。

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