Loading...
Loading...
设计自定义滚动条并复制 CSS。
默认滚动条常与深色或品牌化界面格格不入。用几条 CSS 规则就能给它换色和改尺寸,这个工具替你生成这些规则,并在实时可滚动面板里展示效果。
设置滚动条宽度、滑块圆角,以及轨道、滑块和滑块悬停的颜色。预览是用你的值真实样式化的可滚动区域,所见即所得。输出同时包含 Chrome、Edge、Safari 用的 WebKit 伪元素,以及 Firefox 用的 scrollbar-width 和 scrollbar-color 属性,应用在一个可改名的 .scroll-area 类上。一切都在浏览器里运行。
同时输出 -webkit- 伪元素和 Firefox 属性。
用你当前设置样式化的真实可滚动面板。
宽度、滑块圆角、轨道、滑块和悬停颜色。
为滑块悬停设置单独的颜色。
规则作用于 .scroll-area 类,不影响整页。
整套规则一键复制。
把滑块做得比轨道略亮或略暗,而不是用鲜艳的强调色,这样滚动条看着像个控件,又不抢内容。
设置宽度和滑块圆角。
选轨道、滑块和悬停颜色。
滚动预览检查效果。
复制 CSS,应用到你的滚动容器。
让滚动条贴合深色主题,而不是鲜亮的默认样式。
为侧栏、聊天面板和会滚动的代码块设样式。
给滚动条染上贴合产品色板的颜色。
看清 WebKit 和 Firefox 滚动条属性的差异。
你的设置同时写进 WebKit 滚动条伪元素和 Firefox 滚动条属性,一个作用域样式块把同样的值应用到实时预览元素上。
无账号、无网络请求;生成器在你的浏览器本地运行。
每次改动重写一小段 CSS,所以预览即时更新。