文章目录OverlayScrollbars让滚动条不碍眼也不消失1、 为什么要做这个2、 核心功能3、 框架全覆盖4、 快速上手5、 样式定制6、 适用场景OverlayScrollbars让滚动条不碍眼也不消失KingSora/OverlayScrollbars 在 GitHub 上已经拿到 5,168 Star 了。一个 JS 滚动条插件隐藏原生滚动条换上可自定义的叠加式滚动条同时保留原生的滚动功能和手感。1、 为什么要做这个作者说自己受够了又丑又占地方的滚动条。市面上类似的插件在功能、质量、简洁度、许可证或浏览器支持上没一个能满足他的需求就自己写了一个。2、 核心功能OverlayScrollbars 不是简单地替换滚动条样式它做了几层事情隐藏原生滚动条后生成自定义叠加滚动条视觉上覆盖在内容之上不影响布局宽度完整保留原生滚动行为键盘操作、屏幕阅读器都不受影响支持鼠标、触摸、触控笔三种输入混合使用时也不冲突浏览器兼容范围从 Firefox 59、Chrome 55 到 Edge 15、Safari 10 以上对于服务端渲染场景作者也做了支持。项目兼容 Node、Deno、Bun 环境配合 SSR、SSG、ISR 都可以正常工作。插件自身零依赖全部代码自研保证了包体积和可维护性。支持 Tree Shaking可以按需打包需要的模块。3、 框架全覆盖OverlayScrollbars 为各个前端框架提供了官方组件包overlayscrollbars-reactReact 版本overlayscrollbars-vueVue 版本overlayscrollbars-ngxAngular 版本overlayscrollbars-svelteSvelte 版本overlayscrollbars-solidSolid 版本各版本都提供了对应的组件和工具函数在框架生态内安装即用。4、 快速上手安装npminstalloverlayscrollbars引入 CSS 和 JS初始化一个元素importoverlayscrollbars/overlayscrollbars.css;import{OverlayScrollbars}fromoverlayscrollbars;OverlayScrollbars(document.querySelector(#myElement),{});初始化时也可以通过 attribute 解决闪烁问题divdata-overlayscrollbars-initialize内容区域/div5、 样式定制项目预设了两套主题os-theme-dark和os-theme-light。需要自定义时通过 CSS 自定义属性设定.os-theme-custom{--os-size:10px;--os-handle-bg:#888;--os-handle-border-radius:5px;}.os-theme-custom.os-scrollbar-vertical{--os-size:20px;}每个样式属性都可以按水平/垂直方向独立设置包括尺寸、背景色、边框、圆角、hover 和 active 状态。6、 适用场景可视化大屏和定制 UI 项目原生滚动条与视觉风格不搭需要在滚动条上做特殊交互如拖动跳转、点击滚动跨框架项目需要一套统一的滚动条方案服务端渲染场景下使用滚动条插件UI 项目原生滚动条与视觉风格不搭需要在滚动条上做特殊交互如拖动跳转、点击滚动跨框架项目需要一套统一的滚动条方案服务端渲染场景下使用滚动条插件