OverlayScrollbars:让滚动条不碍眼也不消失

发布时间:2026/10/3 11:47:46

OverlayScrollbars:让滚动条不碍眼也不消失
文章目录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 项目原生滚动条与视觉风格不搭需要在滚动条上做特殊交互如拖动跳转、点击滚动跨框架项目需要一套统一的滚动条方案服务端渲染场景下使用滚动条插件

相关新闻

AI创业的技术债全景图:模型依赖、数据管道和Prompt腐化的系统性治理

AI创业的技术债全景图:模型依赖、数据管道和Prompt腐化的系统性治理

2026/9/9 5:48:38

AI创业的技术债全景图:模型依赖、数据管道和Prompt腐化的系统性治理 一、AI创业的技术债比传统软件更深 传统软件的技术债是可见的:脏代码、缺少测试、架构腐化。AI系统的技术债更隐蔽也更致命:模型升级后效果反而变差、数据管道悄然漂移、Pr…

如何在5分钟内将Photoshop升级为AI智能设计助手

如何在5分钟内将Photoshop升级为AI智能设计助手

2026/8/23 0:51:11

如何在5分钟内将Photoshop升级为AI智能设计助手 【免费下载链接】sd-ppp A Photoshop AI plugin 项目地址: https://gitcode.com/gh_mirrors/sd/sd-ppp 还在为创意设计过程中频繁切换软件而烦恼吗?SD-PPP这款免费的Photoshop AI插件,将彻底改变你…

CANN/GE ACL数据集缓冲区添加函数

CANN/GE ACL数据集缓冲区添加函数

2026/9/29 22:00:59

aclmdlAddDatasetBuffer 【免费下载链接】ge GE(Graph Engine)是面向昇腾的图编译器和执行器,提供了计算图优化、多流并行、内存复用和模型下沉等技术手段,加速模型执行效率,减少模型内存占用。 GE 提供对 PyTorch、Te…

用ffmpeg高效批量调整图片尺寸的实战指南

用ffmpeg高效批量调整图片尺寸的实战指南

2026/10/2 14:34:27

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

Transformers 音频特征提取工具库 audio_utils 全解析:从 Mel 刻度换算到对数 Mel 频谱

Transformers 音频特征提取工具库 audio_utils 全解析:从 Mel 刻度换算到对数 Mel 频谱

2026/9/30 20:35:38

Transformers 音频特征提取工具库 audio_utils 全解析:从 Mel 刻度换算到对数 Mel 频谱 【免费下载链接】transformers 🤗 Transformers: the model-definition framework for state-of-the-art machine learning models in text, vision, audio, and mu…

RustFS 多节点集群重启与滚动升级实战:Readiness、Quorum 与 Degraded 模式完全指南

RustFS 多节点集群重启与滚动升级实战:Readiness、Quorum 与 Degraded 模式完全指南

2026/10/2 4:43:07

RustFS 多节点集群重启与滚动升级实战:Readiness、Quorum 与 Degraded 模式完全指南 【免费下载链接】rustfs 🚀2.3x faster than MinIO for 4KB object payloads. RustFS is an open-source, S3-compatible high-performance object storage system sup…

Java Integer缓存揭秘:128陷阱原理、避坑与面试全解

Java Integer缓存揭秘:128陷阱原理、避坑与面试全解

2026/10/2 4:42:51

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

RustFS Scanner 数据用量发布权威性决策:配额准入如何获得可用的权威依据

RustFS Scanner 数据用量发布权威性决策:配额准入如何获得可用的权威依据

2026/9/30 8:20:32

RustFS Scanner 数据用量发布权威性决策:配额准入如何获得可用的权威依据 【免费下载链接】rustfs 🚀2.3x faster than MinIO for 4KB object payloads. RustFS is an open-source, S3-compatible high-performance object storage system supporting mi…