如何自定义 CSS 滚动条

问题：如何自定义 CSS 滚动条？

回答：

要自定义 CSS 滚动条，您可以使用以下 CSS 属性：

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

滚动条样式属性

• scrollbar-width：设置滚动条的宽度
• scrollbar-color：设置滚动条轨道和轨道的颜色

滚动条轨道样式属性

• scrollbar-gutter：设置轨道和滚动条之间的间隙
• scrollbar-track：设置轨道的外观（例如颜色、背景、阴影）

滚动条轨样式属性

• scrollbar-thumb：设置轨的外观（例如颜色、背景、阴影）

示例

以下 CSS 代码将创建一个自定义的滚动条，其轨为浅灰色，轨为蓝色：

/* 滚动条宽度 */scrollbar-width: thin;/* 滚动条轨道颜色 */scrollbar-gutter: 3px;scrollbar-track: #f2f2f2;/* 滚动条轨颜色 */scrollbar-thumb: #007bff;

展开解释

• scrollbar-width 属性指定滚动条的宽度。您可以使用 thin、medium 和 thick 等关键字，或指定确切的像素值。
• scrollbar-color 属性设置轨道和轨道的颜色。您可以指定两个颜色（第一个用于轨道，第二个用于轨），或使用颜色名称（例如 blue 或 red）。
• scrollbar-gutter 属性设置轨道和滚动条之间的间隙。它可以防止滚动条轨道上出现内容。
• scrollbar-track 属性定制轨道的外观。您可以设置颜色、背景和阴影。
• scrollbar-thumb 属性定制轨的外观。您可以设置颜色、背景和阴影。

注意：

• 并非所有浏览器都支持相同的 CSS 滚动条属性。请在您的目标浏览器中测试您的代码以确保兼容性。
• 滚动条的外观可能取决于操作系统的主题。