Custom Scrollbar
可客製的動畫自訂捲軸，spring 追隨捲動、滑塊可拖曳、點軌道跳轉。
以 motion/react spring 驅動的自訂捲軸：隱藏原生捲軸，改用可拖曳、可點軌道跳轉、支援漸層與 autoHide 的滑塊，並在捲動時帶一點慣性回饋。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
300
8
<CustomScrollbar />
安裝
npx shadcn@latest add https://webberui.com/r/custom-scrollbar.json或在 components.json 設定 registries 後，改用 @webberui/custom-scrollbar 安裝。
安裝依賴後，從 registry JSON（/r/custom-scrollbar.json 的 files[0].content）複製 custom-scrollbar.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { CustomScrollbar } from "@/components/ui/custom-scrollbar";
<CustomScrollbar maxHeight={280} width={9} autoHide>
<div className="p-5">{/* 你的長內容 */}</div>
</CustomScrollbar>maxHeight 決定內容區高度，超出即可捲動。滑塊高度會依內容比例自動計算。傳入 CSS 漸層字串到 thumbColor 即可做出彩色捲軸。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
children | React.ReactNode | — | 要包裹並可捲動的內容 |
maxHeight | number | string | 300 | 內容區最大高度，超出即可捲動 |
width | number | 8 | 捲軸寬度（px） |
thumbColor | string | 靛紫漸層 | 滑塊顏色，可傳 CSS 漸層字串 |
thumbHoverColor | string | — | 滑鼠移入捲軸時的滑塊顏色 |
trackColor | string | rgba(120,120,140,0.14) | 軌道底色 |
showTrack | boolean | true | 是否顯示軌道底色 |
autoHide | boolean | false | 靜止時淡出，捲動、hover 或拖曳時淡入 |
可及性
- 使用者系統開啟「減少動態效果」時，滑塊即時追隨捲動、不套用 spring 慣性
- 原生捲動行為完整保留（滾輪、觸控、鍵盤）；自訂滑塊層帶
aria-hidden，僅作視覺回饋 - 嚴禁使用
100vh等視口高度單位；請以maxHeight給定明確界線