scrollbar：自定义滚动条插件对比实战

前端自定义滚动条主流库simplebar、perfect‑scrollbar、OverlayScrollbars还有框架封装版用来统一多浏览器滚动条样式替代原生滚动条。一、主流库对比库特点体积框架适配适用场景simplebar保留原生滚动行为DOM 侵入小API 简单性能好~14KBsimplebar‑vue / simplebar‑reactPC 后台、弹窗、列表容器最常用perfect‑scrollbar老牌配置丰富不接管滚动逻辑只渲染滚动条 DOM~16KBvue‑perfect‑scrollbar复杂嵌套滚动、老项目兼容OverlayScrollbarsTS 编写零依赖SSR 友好支持 body 滚动高度可定制~18KB官方 vue/react/svelte现代项目、SSR/Next/NuxtBetterScroll主打移动端平滑滚动、回弹PC 滚动条能力弱‑Vue/ReactH5 移动端列表注意浏览器 CSS 伪类::-webkit-scrollbar仅 Chrome 系生效Firefox 不支持生产要兼容多浏览器必须用 JS 插件。二、SimpleBar推荐上手最简单原生 JSnpm install simplebarimport SimpleBar from simplebar; import simplebar/dist/simplebar.css; // html div idbox styleheight:300px/div const sb new SimpleBar(document.querySelector(#box), { autoHide: true, // hover才显示滚动条false永久显示 }); // 内容动态变化手动更新sb.recalculate()简写直接加属性data‑simplebardiv data-simplebar styleheight:300px长内容……/div2.1、Vue3 simplebar‑vuenpm install simplebar-vuetemplate SimpleBar styleheight:300px :autoHidefalse div v-fori in 50 :keyi{{i}}/div /SimpleBar /template script setup import SimpleBar from simplebar-vue; import simplebar/dist/simplebar.min.css; /script2.2、React simplebar‑reactnpm install simplebar-reactimport SimpleBar from simplebar-react; import simplebar/dist/simplebar.min.css; SimpleBar style{{maxHeight:300}} autoHide{true} content... /SimpleBar自定义滚动条样式覆盖 css 变量.simplebar-scrollbar::before { background: #409eff; border-radius:6px; }三、perfect‑scrollbarnpm install perfect-scrollbar原生 JS 示例import PerfectScrollbar from perfect-scrollbar; import perfect-scrollbar/css/perfect-scrollbar.css; const container document.querySelector(#scroll); const ps new PerfectScrollbar(container, { suppressScrollX: true, //关闭横向滚动 wheelSpeed: 1, }); //销毁 ps.destroy()四、OverlayScrollbars现代 TS 库SSR 友好npm install overlayscrollbarsimport { OverlayScrollbars } from overlayscrollbars; import overlayscrollbars/overlayscrollbars.css; OverlayScrollbars(document.querySelector(#box), { scrollbars:{ theme:os-theme-light } });有官方 vue/react 包支持 Nuxt、Next可直接对body做全局滚动条美化。常见踩坑1、容器必须设置固定高度 /max‑height否则滚动条不出现2、动态加载数据后需要调用实例方法recalculate()重新计算滚动条尺寸3、不要对 body 使用 simplebar官方不建议body 美化优先 OverlayScrollbars4、不要同时写overflow:auto和插件插件内部会接管滚动。选型建议普通后台管理系统、弹窗列表SimpleBar平衡性能与开发效率Nuxt/Next SSR 项目需要美化页面 body 滚动OverlayScrollbars老项目、复杂嵌套滚动perfect‑scrollbarH5 移动端BetterScroll。五、浏览器原生 scrollbar 相关属性全景梳理说明CSS 滚动条分为两套体系旧版 WebKit 私有伪元素Chrome/Safari/Edge、标准 CSS Scrollbars 模块Firefox、现代浏览器二者语法完全不一样无统一标准下面表格完整汇总。5.1、WebKit 内核私有伪元素‑webkit‑scrollbar*Chromium、Safari、Edge⚠️ 非 W3C 标准仅 webkit/blink 内核可用firefox 不识别属性伪元素作用说明可设置样式示例::-webkit-scrollbar整个滚动条容器宽 / 高width、height、background::-webkit-scrollbar { width:8px; }::-webkit-scrollbar-button滚动条两端上下 / 左右箭头按钮display、background、height、width::-webkit-scrollbar-button { display:none; }::-webkit-scrollbar-thumb滚动条滑块拖动部分background、border‑radius、border::-webkit-scrollbar-thumb { background:#aaa; border-radius:4px; }::-webkit-scrollbar-track滚动条轨道滑块背景background、border、border‑radius::-webkit-scrollbar-track { background:#f5f5f5; }::-webkit-scrollbar-track-piece轨道片段不含按钮部分background极少使用::-webkit-scrollbar-corner横竖滚动条交汇角落右下角background::-webkit-scrollbar-corner { background:#fff; }::-webkit-resizer元素右下角可拖拽调整大小小三角backgroundtextarea 右下角调整手柄注意::-webkit-scrollbar不能直接设置 background 颜色background 要写在 track 上它只控制滚动条的尺寸。5.2、W3C 标准 CSS ScrollbarsFirefox 优先支持现代浏览器逐步兼容标准属性无伪元素直接写在容器选择器上不是伪元素CSS 属性作用可选值示例scrollbar-width设置滚动条宽度仅垂直滚动条auto默认、thin细滚动条、none隐藏滚动条保留滚动能力scrollbar-width: thin;scrollbar-color设置滑块颜色 轨道颜色thumb-color track-colorscrollbar-color:#666 #eee;5.3、滚动相关配套原生属性影响滚动行为不是滚动条外观经常和滚动条一起使用不属于 scrollbar 样式但属于滚动原生能力属性作用overflowauto/hidden/scroll/visible开启 / 关闭滚动条overflow‑x/overflow‑y分别控制水平、垂直方向滚动overscroll‑behavior滚动到边界时是否触发页面回弹、链式滚动scroll‑behaviorsmooth平滑滚动 /auto瞬间跳转‑webkit‑overflow‑scrolling: touch旧 ios 的惯性滚动现已废弃5.4、JS 原生滚动条相关 DOM 属性Element 对象JS 读取滚动尺寸、位置不能修改滚动条样式只读为主DOM 属性含义element.scrollWidth元素完整内容宽度含溢出隐藏部分element.scrollHeight元素完整内容高度含溢出隐藏部分element.scrollLeft水平滚动偏移量可读写element.scrollTop垂直滚动偏移量可读写element.clientWidth可视区域宽度不含滚动条element.clientHeight可视区域高度不含滚动条element.offsetWidth元素总宽包含滚动条宽度5.5、兼容性与常见坑总结5.5.1、想要同时兼容 ChromeFirefox 修改滚动条样式两套语法一起写.box{ /* firefox标准 */ scrollbar-width: thin; scrollbar-color: #888 #f1f1f1; } /* webkit内核 */ .box::-webkit-scrollbar{width:6px;} .box::-webkit-scrollbar-thumb{background:#888;border-radius:3px;} .box::-webkit-scrollbar-track{background:#f1f1f1;}5.5.2、scrollbar-width:none火狐隐藏滚动条::-webkit-scrollbar{display:none}webkit 隐藏滚动条保留滚动能力。5.5.3、Safari 旧版本对scrollbar‑color标准属性支持差只能用 webkit 伪元素。5.5.4、CSS 标准没有直接修改系统滚动条圆角、阴影的通用属性火狐只能改颜色和粗细圆角只能靠 thumb 背景裁剪实现。5.6、区别对照表webkit 伪元素 vs w3c scrollbars 标准项目-webkit‑scrollbar非标准CSS Scrollbars 标准支持浏览器Chrome、Edge、SafariFirefox新版 Chrome 也支持设置入口css 伪元素::‑webkit‑xxx直接写在容器上的属性可定制粒度细按钮、轨道、角落、滑块全部可控粗仅宽度、滑块颜色、轨道颜色是否 W3C 标准❌ 私有扩展✅ 正式标准