创建自定义 CSS 滚动条

使用我们直观的生成器，设计出与你的网站风格相匹配的漂亮、现代的滚动条。 无需编码技能！

开始自定义 查看示例

控制面板

8px
0px

Preview

Scrollbar Preview Content

This is a demonstration area for your custom scrollbar. Adjust the settings on the left to see real-time changes.

Feature 1

Fullycustomizable scrollbars for modern websites and applications.

Feature 2

Cross-browser support with automatic prefixing for different browsers.

Longtextcontent example: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimadminim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit involuptatevelit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollitanim id estlaborum.

More textcontent: Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est erosbibendum elit, nec luctusmagna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Doneclobortis risus a elit.Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenasfermentum consequat mi. Donecfermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquamfaucibus, elit ut dictumaliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquamconsequat. Curabituraugue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hachabitasse platea dictumst.

End of text: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam remaperiam, eaque ipsa quae ab illoinventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sitaspernatur aut odit aut fugit,sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui doloremipsum quia dolor sit amet,consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaeratvoluptatem. Ut enim ad minimaveniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quisautem vel eum iurereprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nullapariatur?

GeneratedCSS Code

Copied to clipboard!

Powerful Features

Fully Customizable

Adjust every aspect of your scrollbar including width, colors, radius, and borders to match your website's design perfectly.

Cross-Browser Support

Generate CSS code that works across all modern browsers including Chrome, Firefox, Safari, and Edge.

Ready-to-Use Presets

Start with professional designs using our curated collection of scrollbar presets for quick implementation.

Real-time Preview

See exactly how your scrollbar will look as you make adjustments with our interactive preview panel.

获取格式规范、精简的 CSS 代码，可直接集成到项目中，无需任何冗余代码。

响应式设计

创建可完美适配不同屏幕尺寸和设备的滚动条，确保一致的用户体验。

使用方法

1

自定义滚动条

通过控制面板调整滚动条的宽度、颜色、半径等属性，直至与您的设计理念完美契合。

2

复制生成的 CSS

当您对预览效果满意后，点击“复制 CSS”按钮将生成的代码复制到剪贴板。

3

添加到您的项目

将 CSS 代码粘贴到项目样式表中或直接内联使用。将类名应用于任何元素即可查看自定义滚动条的效果。

滚动条示例

带圆角的现代蓝色滚动条示例。

该滚动条使用浅蓝色轨道，拇指为深蓝色，悬停时颜色会发生变化。

向下滚动可查看完整效果。 拇指的半径为 5px，边缘圆滑。

为了让您清楚地看到所有这些错误的根源，以及它们如何带来愉悦和痛苦。

现代蓝色

一个流畅的蓝色滚动条，边缘呈圆角。

一个低调的深色滚动条，风格简洁。适合内容丰富的网站。

这个滚动条使用非常浅灰色的轨道，搭配中等灰色的滚动条头，悬停时会变暗。

向下滚动以查看完整效果。滚动条的滚动块具有3像素的圆角半径，以实现柔和的边缘。

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

微妙的深色

适用于内容网站的极简深色滚动条

一个采用鲜艳绿色滚动条和大胆样式的示例。非常适合环保或健康相关的网站。

此滚动条采用浅绿色轨道，搭配鲜艳的绿色滚动块，悬停时会变暗。

向下滚动以查看完整效果。滚动条的拇指部分采用6像素半径，呈现明显的圆角效果。

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

活力绿

专为环保主题网站设计的醒目绿色滚动条

时尚紫色滚动条示例，采用现代设计风格。适用于创意或作品集网站。

此滚动条采用浅紫色轨道，搭配深紫色滚动条头，悬停时颜色加深。

向下滚动以查看完整效果。滚动条头采用4像素半径，呈现干净的圆角效果。

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

时尚紫色

适用于创意项目的现代紫色滚动条

常见问题

Related Tools

SCSS 到 CSS 转换器

将您的 SCSS 代码转换为 CSS。快速、简单且安全。

CSS压缩工具

以专业精度压缩和优化您的CSS代码

Stylus到 CSS 转换器

将Stylus代码转换为CSS。快速、简单且安全。

电气单位转换器

精确转换不同电气单位，满足您的工程计算需求

JavaScript压缩工具

使用专业级压缩工具压缩并优化您的 JavaScript 代码。减少文件大小，提升加载速度，增强网页应用程序的性能。

八进制转文本

无缝将八进制表示转换为文本