CSS - 滚动条
CSS - 滚动条
上一页
下一页
滚动条是用户界面元素，允许用户浏览无法完全显示在可见区域内的长内容。
它们由垂直或水平条组成，带有一个可拖动的滑块，使用户能够向上/向下或向左/向右移动内容。
务必在不同的浏览器和设备上测试您的滚动条样式，以确保其按预期工作。
目录
如何设置滚动条样式？
滚动条选择器
创建自定义滚动条
滚动条样式
相关的 CSS 滚动条属性
如何设置滚动条样式？
创建一个容器元素，例如 div，以容纳内容和滚动条。
将容器元素的高度设置为固定值。
将 overflow: auto 属性添加到容器元素以启用滚动条。
使用 :-webkit-scrollbar 伪元素来设置滚动条的样式。
div {
width: 370px;
height: 120px;
overflow: auto;
}
div::-webkit-scrollbar {
width: 15px;
}
使用 CSS 属性（宽度、高度、背景颜色、边框、圆角）自定义滚动条。
滚动条选择器
对于 WebKit 浏览器（Chrome、Safari、Edge），您可以使用以下 伪元素 来更改滚动条。
::-webkit-scrollbar 选择整个滚动条以设置其样式。
::-webkit-scrollbar-button 选择滚动条顶部和底部的按钮。
::-webkit-scrollbar-thumb 选择可拖动的滚动滑块。
::-webkit-scrollbar-track 选择滚动条的背景轨道。
::-webkit-scrollbar-track-piece 选择滚动条轨道中滑块顶部和底部位置之间的中间部分。
::-webkit-scrollbar-corner 选择滚动条的底部角，即水平和垂直滚动条的交汇处。
::-webkit-resizer 选择滚动条底部可拖动的调整器。
创建自定义滚动条
以下示例演示了如何使用 -webkit-scrollbar CSS 伪元素创建和设置基本滚动条的样式。
示例
此示例仅在 WebKit 浏览器（Chrome、Safari、Edge）上才能正常工作。
Scrollbars using -webkit-scrollbar
This block includes a large amount of content
to demonstrate how scrollbars work when there
is an overflow within an element box.
They consist of vertical or horizontal bars
with a draggable thumb, enabling users to
move content up and down or left to right.
Changes Made:
Changed Scrollbar Thumb Color
Changed Scrollbar background Color
Add Hover effect to thumb
设置 CSS 滚动条样式
以下示例演示了如何使用 -webkit-scrollbar 伪元素设置滚动条的样式，通过添加颜色、宽度、边框和圆角来自定义其外观 -
示例
此示例仅在 WebKit 浏览器（Chrome、Safari、Edge）上才能正常工作。
Scrollbars using -webkit-scrollbar
This block includes a large amount of content
to demonstrate how scrollbars work when there
is an overflow within an element box.
They consist of vertical or horizontal bars
with a draggable thumb, enabling users to
move content up and down or left to right.
CSS 滚动条相关属性
以下是与滚动条相关的 CSS 伪元素列表
属性
值
示例
-webkit-scrollbar
选择整个滚动条以设置其样式。
尝试一下
-webkit-scrollbar-button
选择滚动条顶部和底部的按钮。
尝试一下
-webkit-scrollbar-thumb
选择可拖动的滚动滑块。
尝试一下
-webkit-scrollbar-track
选择滚动条的背景轨道。
尝试一下
-webkit-scrollbar-track-piece
选择滚动条轨道中滑块顶部和底部位置之间的中间部分。
尝试一下
-webkit-scrollbar-corner
选择滚动条的底部角，即水平和垂直滚动条的交汇处。
尝试一下
打印页面
上一页 下一页
广告