webkit-scrollbar-thumb

`WebKit scrollbar thumb` 是 WebKit 浏览器（如 Safari 和 Chrome）中的一个 CSS 类，用于定制滚动条滑块（thumb）的样式。当你想要改变滚动条的外观，比如颜色、圆角、大小或者有无凹凸感时，可以使用这个类来定制样式。

以下是一个简单的示例，展示如何使用 `webkit-scrollbar-thumb` 来改变滚动条滑块的背景颜色和圆角：

/* 为WebKit浏览器（如Safari和Chrome）设置滚动条样式 */
.webkit-scrollbar {
  width: 12px; /* 滚动条宽度 */
}

.webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5); /* 滑块背景颜色 */
  border-radius: 6px; /* 圆角 */
  -webkit-border-radius: 6px; /* 为WebKit添加额外的圆角支持 */
}

/* 当滚动条滑块被选中时（例如鼠标悬停或滚动时） */
.webkit-scrollbar-thumb:hover,
.webkit-scrollbar-thumb:active {
  background-color: rgba(0, 0, 0, 0.8);
}

相关问题

-webkit-scrollbar-thumb

引用\[1\]和\[2\]中提到了如何改变滚动条中滑块的样式。通过使用::-webkit-scrollbar-thumb选择器，可以改变滚动条上的滚动滑块的样式。可以通过设置background-color属性来改变滑块的背景颜色。例如，设置background-color: orange;可以将滑块的背景颜色改为橙色。同时，还可以通过设置其他属性，如border-radius、box-shadow等来进一步自定义滑块的样式。\[1\]\[2\]所提供的代码示例展示了如何改变滚动条和滑块的样式。你可以根据自己的需求进行修改和应用。
#### 引用[.reference_title]
- *1* *3* [滚动条样式修改](https://blog.csdn.net/coder_jxd/article/details/124213962)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [前端CSS 设置滚动条样式 ::-webkit-scrollbar](https://blog.csdn.net/u012551928/article/details/109286853)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

::-webkit-scrollbar-thumb cursor

`::-webkit-scrollbar-thumb`是用于定义滚动条内部小方块的样式的伪元素。`cursor`属性用于定义鼠标指针在元素上的样式。通过设置`cursor`属性，可以改变鼠标指针在滚动条内部小方块上的样式。

以下是一个示例代码，演示如何使用`cursor`属性来改变滚动条内部小方块的鼠标指针样式：

::-webkit-scrollbar-thumb {
  cursor: pointer;
}

上述代码将滚动条内部小方块的鼠标指针样式设置为指针形状，表示可以点击或拖动滚动条。