Driver.js 中文

Driver.js 是一款零依赖、压缩后仅5KB的JavaScript库，专为Web应用提供产品导览、高亮和上下文帮助，通过步骤式引导快速降低用户上手门槛。

核心能力

Driver.js 不只是Tooltip库，而是完整的产品引导系统：高亮目标元素、遮罩其余区域、自动滚动定位、弹出说明弹窗，并支持步骤切换、键盘控制（ESC退出、方向键导航）、点击遮罩关闭、退出确认等交互。官网演示覆盖动画导览、静态导览、异步导览、无元素高亮、显示进度、禁止关闭、彩色遮罩层、自定义弹出框位置等十余种场景。

• 高亮任意元素: 通过CSS选择器定位并聚焦页面任何DOM元素
• 遮罩层: 支持自定义颜色和透明度，可单独设置遮罩样式
• 弹出框: 可配置标题、描述、按钮文本，支持自定义HTML内容
• 步骤钩子: 每一步前后可执行回调函数，实现动态步骤或权限控制
• 移动端适配: 除桌面和平板外，专门适配手机端触摸操作

安装与框架兼容

支持npm（npm install driver.js）、pnpm、yarn安装，也可通过CDN直接引入脚本和样式表（jsDelivr）。无框架绑定，可在React、Vue 2/3、Angular、Svelte、Solid、Astro、Next.js、Nuxt及原生HTML中直接使用。CDN使用时需从window.driver.js.driver获取构造函数。

• npm安装: npm install driver.js，然后import { driver } from 'driver.js'
• CDN引入: 使用jsDelivr链接，需额外引用driver.css样式文件
• 框架无关: 不依赖jQuery、React等运行时，降低接入成本
• TypeScript支持: 官方包包含类型定义文件

典型应用场景

SaaS产品首次使用引导（创建项目配置API部署上线）、新功能介绍（版本更新后高亮新增按钮或面板）、后台管理系统培训（边操作边讲解）、表单填写提示（分步骤引导用户填写字段）。官网列举了四个官方用例：导览用户、移除干扰、上下文帮助、功能推荐。

• 新手引导: 自动依次高亮关键操作点，配合说明文字完成首次上手
• 新功能推广: 版本更新后直接高亮新增功能，无需用户翻阅更新日志
• 后台培训: 结合操作步骤，降低企业后台数十个功能的培训成本
• 表单引导: 按顺序提示填写字段，减少用户乱填或遗漏

许可与社区

采用MIT许可，个人和商业用途均免费。GitHub获得20K+星标，拥有数百万次下载。中文文档站driverjs.cn提供完整API参考、定制主题指南及1.x迁移说明，并附带多个可直接复制运行的Demo示例。

• 许可: MIT，无任何商业限制
• 社区: GitHub 20K Stars，持续维护8年

常见问题

Q1：Driver.js 中文站 driverjs.cn 提供的文档和官方英文版有什么区别？

A1：driverjs.cn 是独立的中文镜像站，内容基于官方文档翻译，包含安装、基本用法、配置、API参考、定制主题、迁移到1.x等完整章节，并保留了官网所有Demo示例（如动画导览、异步导览、彩色遮罩层等），方便中文开发者直接复制代码使用。

Q2：Driver.js 在移动端（手机/平板）上表现如何？

A2：官方明确支持移动端，除电脑和平板外，专门适配手机端操作。遮罩层和高亮在触摸屏上正常响应，弹出框位置会根据屏幕尺寸自动调整，且支持键盘控制（如ESC退出），但移动端触摸事件无需额外配置。

Q3：Driver.js 能否实现动态步骤（例如根据用户权限显示不同引导）？

A3：可以。通过步骤间的回调钩子（onStepChange等），可以在每一步执行前动态生成或修改步骤数组，实现根据用户角色、登录状态或API返回数据切换引导流程。官网示例中“异步导览”即演示了动态加载步骤的场景。

更多同类工具与网站,可在前端库分类继续挑选。

信息核实于 2026年7月,具体以官网为准。