点状滚动条仅支持 WebKit 内核浏览器（Chrome、Edge、新版 Safari），Firefox 和旧版 Safari 不支持，iOS Safari 基本不可用；需用 repeating-radial-gradient 实现，注意圆心定位、px 单位及逗号语法。

html如何实现彩色点状滚动条样式

滚动条颜色和点状效果必须用 `::webkit-scrollbar` 伪元素控制

Chrome、Edge、Safari（新版）支持 ::webkit-scrollbar 系列伪类，但 Firefox 和旧版 Safari 完全不支持——这意味着彩色点状滚动条本质上是 WebKit 内核专属方案，无法跨浏览器统一实现。别试图用 JS 模拟原生滚动条来“兼容”，那会破坏惯性滚动、触摸板缩放、键盘导航等基础体验。

点状效果不是靠背景图或 SVG，而是用 background 配合 repeating-radial-gradient 实现的。关键在于控制渐变圆心间距和透明度，让视觉上呈现离散小圆点。

示例代码：

/* 滚动条整体 */
::-webkit-scrollbar {
  width: 12px; /* 垂直滚动条宽度 */
  height: 12px; /* 水平滚动条高度（可选） */
}
<p>/<em> 滚动条轨道 </em>/
::-webkit-scrollbar-track {
background: #f0f0f0;
}</p><p>/<em> 滚动条滑块（即“点状”部分） </em>/
::-webkit-scrollbar-thumb {
background: repeating-radial-gradient(
circle at 50% 50%,</p><h1>4a90e2,</h1><pre class="brush:php;toolbar:false;">#4a90e2 4px,
transparent 4px,
transparent 8px

); border-radius: 6px; }

/ 滑块悬停时增强对比 / ::-webkit-scrollbar-thumb:hover { background: repeating-radial-gradient( circle at 50% 50%,

357abd,

#357abd 5px,
transparent 5px,
transparent 10px

); }

`repeating-radial-gradient` 的参数顺序和尺寸单位容易写错

第一个圆心位置 circle at 50% 50% 必须写，否则 Chrome 会回退为默认线性渐变；半径值必须用 px（不能用 em 或 %），因为滚动条 thumb 是无内容流的渲染盒子，相对单位无效。

常见错误包括：

漏掉 circle at，导致变成重复线性渐变，看起来像条纹而非点状
把 transparent 4px, transparent 8px 写成 transparent 4px 8px（少一个逗号），CSS 解析失败，滑块直接变空白
设置 width 过小（如 6px），点状图案被裁切，只显示半个圆甚至一条线

移动端 Safari 对 `::-webkit-scrollbar` 支持极弱

iOS 16.4+ 才开始有限支持 ::-webkit-scrollbar，且仅限于某些 WKWebView 场景；普通 Safari 浏览器中该伪元素完全被忽略。也就是说，你在 Mac 上调好的点状滚动条，在 iPhone 上大概率还是系统原生灰色细条。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

如果你的页面必须在 iOS 上也“看起来有点设计感”，唯一可行路径是：用 overflow: hidden 隐藏原生滚动条，再用 position: absolute + transform: translateY() 手动实现一个带点状背景的拖拽控件——但这意味着你得自己处理 touchstart/move/end、惯性、边界反弹、scroll event 同步，成本远超收益。

深色模式下要手动适配 `::-webkit-scrollbar` 颜色

CSS 媒体查询里的 @media (prefers-color-scheme: dark) 不会自动影响 ::-webkit-scrollbar 样式，必须显式重写整套规则：

@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-thumb {
    background: repeating-radial-gradient(
      circle at 50% 50%,
      #5b7be8,
      #5b7be8 4px,
      transparent 4px,
      transparent 8px
    );
  }
  ::-webkit-scrollbar-track {
    background: #2d2d2d;
  }
}

注意：不要依赖 color-scheme: dark 声明去触发，它只影响表单控件，对滚动条无效。

点状滚动条的核心限制就两点：WebKit 专属、移动端基本不可用。真正在意体验一致性的话，不如把设计精力放在内容排布和滚动节奏上——比如用 scroll-behavior: smooth 和节流 scroll 事件，比花哨的滚动条更影响用户感知。