css滚动条样式怎么用

css 滚动条样式化方法：scrollbar-width：指定滚动条宽度（thin、medium、thick、auto）。scrollbar-color：指定轨道和滑块颜色（css 颜色值、inherit）。

CSS 滚动条样式

如何使用 CSS 样式化滚动条？

使用 CSS 样式化滚动条涉及设置以下属性：

• scrollbar-width
• scrollbar-color

scrollbar-width

立即学习“前端免费学习笔记（深入）”；

• 指定滚动条的宽度，可以是 thin、medium、thick 或 auto。
• auto 值使用系统默认宽度。

scrollbar-color

• 指定轨道和滑块的颜色。可以是任何有效的颜色值，例如：

  • color-1 color-2：轨道和滑块的颜色分别为 color-1 和 color-2。
  • inherit：从父元素继承颜色。

示例代码

/* 使滚动条更宽 */
body::-webkit-scrollbar {
    scrollbar-width: thick;
}

/* 设置轨道为蓝色，滑块为红色 */
body::-webkit-scrollbar {
    scrollbar-color: #0000FF #FF0000;
}

注意：

• 这些属性在所有主流浏览器中均得到支持。
• ::-webkit-scrollbar 伪类仅适用于 WebKit 浏览器（例如 Chrome 和 Safari）。对于其他浏览器，可以使用 ::-moz-scrollbar 或 ::-ms-scrollbar。

以上就是css滚动条样式怎么用的详细内容，更多请关注慧达安全导航其它相关文章！