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

发布时间:2026/7/8 14:58:29

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/7/8 14:48:28

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

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

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

2026/7/8 14:48:28

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

MATLAB雷达多普勒仿真工具集:带可视化操作界面、自动参数识别与主流算法效果对比

MATLAB雷达多普勒仿真工具集:带可视化操作界面、自动参数识别与主流算法效果对比

2026/7/8 16:28:49

本文还有配套的精品资源,点击获取 简介:一套开箱即用的MATLAB雷达信号处理仿真工具,专注多普勒效应下的目标测速与测距任务。提供图形化交互界面(GUI.m),支持一键运行完整仿真流程,包括发射信…

北斗B1I信号MATLAB处理工具包:含仿真生成、PRN捕获与载波/码环实时跟踪

北斗B1I信号MATLAB处理工具包:含仿真生成、PRN捕获与载波/码环实时跟踪

2026/7/8 16:28:49

本文还有配套的精品资源,点击获取 简介:提供一套开箱即用的MATLAB北斗B1I信号处理流程,覆盖从信号建模到闭环跟踪的完整链路。支持通过generateB1Icode.m和codegen_B1I.m生成标准B1I中频仿真数据,并保存为test_beidou_sim_100m…

sklearn 1.3+ PartialDependenceDisplay 实战:5分钟生成房价模型PDP与ICE对比图

sklearn 1.3+ PartialDependenceDisplay 实战:5分钟生成房价模型PDP与ICE对比图

2026/7/8 16:28:49

房价预测模型的可视化利器:sklearn 1.3 PartialDependenceDisplay 深度解析在房价预测模型的开发过程中,理解特征如何影响预测结果是每个数据科学家和机器学习工程师的核心诉求。传统方法往往停留在特征重要性排序的层面,而部分依赖图(PDP)和…

如何快速掌握游戏脚本扩展器:从新手到高手的完整指南

如何快速掌握游戏脚本扩展器:从新手到高手的完整指南

2026/7/8 16:28:49

如何快速掌握游戏脚本扩展器:从新手到高手的完整指南 【免费下载链接】REPENTOGON Script extender for The Binding of Isaac: Repentance 项目地址: https://gitcode.com/gh_mirrors/re/REPENTOGON 你是否曾经在玩《以撒的结合:悔改》时&#x…

深度解析密码管理器安全架构:Argon2与KDBX的加密基石

深度解析密码管理器安全架构:Argon2与KDBX的加密基石

2026/7/8 16:28:49

1. 项目概述:为什么我们需要深度解析一个密码管理器的安全架构?在数字生活几乎等同于真实生活的今天,密码管理器早已不是少数极客的玩具,而是每个人保护数字资产的第一道,也是最重要的一道防线。市面上选择很多&#x…

Matlab实现球形粒子近场光场可视化:基于Mie理论的电场强度与相位仿真工具

Matlab实现球形粒子近场光场可视化:基于Mie理论的电场强度与相位仿真工具

2026/7/8 16:18:49

本文还有配套的精品资源,点击获取 简介:一套开箱即用的Matlab仿真工具,专注计算单色平面波照射下介质球形粒子周围近场区域的电场强度和相位空间分布。核心算法严格依据经典Mie散射理论推导,主程序mieHKUNearField.m支持灵活配…

解锁AMD Ryzen处理器深层性能:SMU Debug Tool完全指南

解锁AMD Ryzen处理器深层性能:SMU Debug Tool完全指南

2026/7/8 0:44:47

解锁AMD Ryzen处理器深层性能:SMU Debug Tool完全指南 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: https://gi…

6个月转型AI工程师:实战路径与核心技能

6个月转型AI工程师:实战路径与核心技能

2026/7/8 6:29:42

1. 项目概述:6个月转型AI工程师的可行性路径在2023年大模型技术爆发的背景下,AI工程师岗位需求同比增长217%(LinkedIn数据)。不同于传统算法工程师需要3-5年培养周期,现代AI工程师更侧重工程化落地能力。我在硅谷科技公…

YOLOv5模型剪枝与量化实战:边缘设备部署优化

YOLOv5模型剪枝与量化实战:边缘设备部署优化

2026/7/8 14:04:34

1. 项目背景与核心价值在计算机视觉领域,YOLOv5因其出色的实时检测性能成为工业界宠儿。但当我们尝试将其部署到边缘设备(如树莓派、Jetson Nano或手机终端)时,立刻会遇到两个致命问题:模型体积庞大(原始YO…

Qwen Code+Obsidian构建可执行的AI时代认知操作系统

Qwen Code+Obsidian构建可执行的AI时代认知操作系统

2026/7/8 0:07:15

1. 项目概述:这不是又一个笔记软件教程,而是一套可复用的“认知操作系统”搭建逻辑你有没有试过,在读完Andrej Karpathy那篇著名的《Software 2.0》之后,满脑子都是“神经网络即代码”的震撼,但合上网页,打…

校园服饰细分赛道测算程序,学生平价国风,机能穿搭市场规模预估。

校园服饰细分赛道测算程序,学生平价国风,机能穿搭市场规模预估。

2026/7/8 0:07:15

校园服饰细分赛道测算程序(Python)——学生平价国风 & 机能穿搭市场规模预估(TAM / SAM / SOM)一、实际应用场景描述(真实业务抽象)在《时尚产业与品牌创新》课程中,细分市场切入&#xff0…

Visual C++运行库完整解决方案:告别软件兼容性问题

Visual C++运行库完整解决方案:告别软件兼容性问题

2026/7/8 0:07:15

Visual C运行库完整解决方案:告别软件兼容性问题 【免费下载链接】vcredist AIO Repack for latest Microsoft Visual C Redistributable Runtimes 项目地址: https://gitcode.com/gh_mirrors/vc/vcredist 你是否曾为打开游戏时弹出的"DLL缺失"错误…