CSS 滚动条生成器

这是一个可滚动区域，向下滚动查看效果。自定义滚动条可以让网页看起来更精致。

滚动条由两部分组成：轨道（track）和滑块（thumb）。滑块可以通过 :hover 状态显示不同的颜色。

Webkit 内核浏览器（Chrome、Edge、Safari）使用 ::-webkit-scrollbar 相关伪元素控制样式。

Firefox 则使用 scrollbar-color 和 scrollbar-width 属性（较简单）。

本工具会同时生成两套代码以兼容主流浏览器。

继续滚动查看下方内容...

滚动条宽度建议在 6px - 16px 之间，太窄点击不便，太宽视觉上笨重。

圆角可以让滚动条更现代，建议使用 width / 2 的值作为 border-radius。

滑块和轨道的颜色对比度要合适，确保用户能清楚看到滚动位置。

到此结束，感谢浏览！