如何使用CSS改变滚动条的位置？-tutorial css-php.cn

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

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

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

为元素创建一个新类
定位滚动条和拇指
使用“position”属性更改滚动条的位置

为元素创建一个新类

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

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

Salin selepas log masuk

此类将以“scrollable-div”元素的滚动条为目标，并将宽度设置为 5 像素，背景颜色设置为浅灰色。

定位滚动条的拇指

在这一步中，我们的目标是滚动条的拇指。拇指是滚动条中当用户滚动时移动的部分。我们将通过将以下代码添加到 CSS 类来做到这一点 -

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

Salin selepas log masuk

这会将拇指的颜色更改为黑色。

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

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

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

Salin selepas log masuk

这会将滚动条定位在“scrollable-div”元素的左侧。

示例

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

 The scroll bar on the left-hand side of the div element   
  The scroll bar on the Left side of the div element
  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.

Salin selepas log masuk

示例

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

 The scroll bar on the right-hand side of the div element   
  The scroll bar on the right side of the div element
 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.

Salin selepas log masuk