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

百变鹏仔 3个月前 (09-20) #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>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>

结论

使用 CSS 更改滚动条的位置是一个简单的过程，可以通过为元素创建一个新类、定位滚动条和滑块，然后使用“position”属性来更改滚动条的位置来完成。通过一点 CSS 知识和一些实验，我们可以为网站创建独特的自定义外观。

文章推荐

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

为元素创建一个新类

定位滚动条的拇指

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

示例

示例

结论

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写