如何使用CSS改变滚动条的位置？-css教程-PHP中文网

为元素创建一个新类

定位滚动条的拇指

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

示例

The scroll bar on the Left side of the div element

The scroll bar on the right side of the div element

结论

首页

web前端

css教程

如何使用CSS改变滚动条的位置？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 26, 2023 pm 04:09 PM

如何使用CSS改变滚动条的位置？

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

在本文中，我们将讨论如何使用 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 id="The-scroll-bar-on-the-Left-side-of-the-div-element">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 id="The-scroll-bar-on-the-right-side-of-the-div-element">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>

登录后复制