网页滚动条滚动条滑块形状怎么改_html滚动条滑块造型自定义方法

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

网页滚动条滚动条滑块形状怎么改_html滚动条滑块造型自定义方法

2025-11-05

浏览次数：次

返回列表

通过调整::-webkit-scrollbar-thumb的圆角、背景和尺寸可自定义滚动条滑块外观，如设置border-radius实现胶囊形或矩形滑块，配合background、border等属性美化样式，适用于Chrome、Edge、Safari等Webkit内核浏览器，Firefox和IE不支持，移动端Safari部分支持，建议避免过度隐藏影响体验。

网页滚动条滚动条滑块形状怎么改_html滚动条滑块造型自定义方法

网页滚动条的滑块样式可以通过CSS来自定义，特别是在基于Webkit内核的浏览器（如Chrome、Edge、Safari）中，支持对滚动条各个部分进行样式控制。下面介绍如何修改滚动条滑块的形状和外观。

使用Webkit伪元素自定义滚动条滑块

在支持的浏览器中，可以通过以下伪元素来定制滚动条：

::-webkit-scrollbar：整个滚动条的宽度或高度
::-webkit-scrollbar-thumb：滚动条的滑块（可拖动部分）
::-webkit-scrollbar-track：滚动条轨道（滑块滑动的背景区域）

要改变滑块的“形状”，实际上是通过调整其圆角、背景、尺寸等视觉属性来实现。例如：

<font style="font-family:monospace;">
/* 整个滚动条 */
::-webkit-scrollbar {
  width: 12px; /* 垂直滚动条宽度 */
  height: 12px; /* 水平滚动条高度 */
}
<p>/<em> 滑块部分 </em>/
::-webkit-scrollbar-thumb {
background: #4a90e2;
border-radius: 6px; /<em> 圆角控制滑块形状，值越大越圆润 </em>/
border: 2px solid transparent;
background-clip: content-box;
}</p><p>/<em> 鼠标悬停时 </em>/
::-webkit-scrollbar-thumb:hover {
background: #357abd;
}</p><p>/<em> 轨道背景 </em>/
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 6px;
}
</font></p>