滚动条样式 (滚动条样式css)

滚动条样式CSS

使用CSS，我们可以自定义网页上的滚动条的外观。本文档将介绍如何使用CSS来样式化滚动条，包括更改宽度、高度、颜色和圆角。

自定义滚动条宽度和高度

要自定义滚动条的宽度和高度，请使用

::-webkit-scrollbar

选择器。此选择器允许您设置滚动条的

width

和

height

属性。

::-webkit-scrollbar {width: 10px;height: 10px;
}

定义滚动条轨道和轨道的颜色

要定义滚动条轨道和轨道的颜色，请使用

::-webkit-scrollbar-track

选择器。此选择器允许您设置轨道和轨道的

background

颜色和

border-radius

。

::-webkit-scrollbar-track {background: e0e0e0;border-radius: 10px;
}

定义滚动条 thumb 的颜色和圆角

要定义滚动条 thumb 的颜色和圆角，请使用

::-webkit-scrollbar-thumb

选择器。此选择器允许您设置 thumb 的

background

颜色和

border-radius

。

::-webkit-scrollbar-thumb {background: 666;border-radius: 10px;
}

定义滚动条在悬浮时的颜色

要定义滚动条在悬浮时的颜色，请使用

::-webkit-scrollbar-thumb:hover

选择器。此选择器允许您设置 thumb 在鼠标悬停时的

background

颜色。

::-webkit-scrollbar-thumb:hover {background: 444;
}

定义滚动条拖动时的颜色

要定义滚动条在拖动时的颜色，请使用

::-webkit-scrollbar-thumb:active

选择器。此选择器允许您设置 thumb 在被拖动时的

background

颜色。

::-webkit-scrollbar-thumb:active {background: 222;
}

示例

以下是一个自定义滚动条外观的示例代码：

::-webkit-scrollbar {width: 10px;height: 10px;
}::-webkit-scrollbar-track {background: e0e0e0;border-radius: 10px;
}::-webkit-scrollbar-thumb {background: 666;border-radius: 10px;
}::-webkit-scrollbar-thumb:hover {background: 444;
}::-webkit-scrollbar-thumb:active {background: 222;
}

使用此代码，我们可以创建一个具有以下外观的自定义滚动条：

• 宽度和高度为 10 像素
• 轨道和轨道为浅灰色，圆角为 10 像素
• Thumb 为深灰色，圆角为 10 像素
• Thumb 在悬停时变为中等灰色
• Thumb 在拖动时变为深灰色

请注意，这些样式仅适用于WebKit浏览器，例如Safari和Chrome。要使此样式适用于其他浏览器，您需要使用特定的浏览器前缀。例如，对于Firefox，您需要使用

:-moz-scrollbar

选择器。

最新资讯