免费在线滚动条CSS定制器
默认浏览器滚动条并不总是符合您的设计。 Dokall 的滚动条定制器可让您在复制 CSS 之前选择轨道和缩略图颜色、设置宽度并实时预览结果。
生成的 CSS 包括 WebKit 和 Firefox 兼容规则。将代码片段放入样式表中，以获得精美的品牌滚动体验。
正在加载工具…
自定义滚动条颜色和大小，然后复制 CSS.
正在加载工具…
默认浏览器滚动条并不总是符合您的设计。 Dokall 的滚动条定制器可让您在复制 CSS 之前选择轨道和缩略图颜色、设置宽度并实时预览结果。
生成的 CSS 包括 WebKit 和 Firefox 兼容规则。将代码片段放入样式表中，以获得精美的品牌滚动体验。
body {
--sb-track-color: #232E33;
--sb-thumb-color: #6BAF8D;
--sb-size: 14px;
scrollbar-width: thin;
scrollbar-color: #6BAF8D #232E33;
}
body::-webkit-scrollbar {
width: var(--sb-size);
height: var(--sb-size);
}
body::-webkit-scrollbar-track {
background: var(--sb-track-color);
border-radius: 3px;
}
body::-webkit-scrollbar-thumb {
background: var(--sb-thumb-color);
border-radius: 3px;
}