UD5工具箱
事件监听器查看器 - 获取指定元素绑定事件
选择 DOM 元素，列出通过 addEventListener 绑定的所有事件及其类型和监听器（可用时）。
观察区域
Root: 滚动容器
参数控制
目标实时状态
回调日志 0
等待 IntersectionObserver 回调...
IntersectionObserver 常见问题与知识点
什么是 IntersectionObserver？
IntersectionObserver（交叉观察器）是浏览器原生API，用于异步监测目标元素与祖先元素或视口的交叉状态。它可以高效地检测元素是否进入、离开可视区域，或者交叉比例是否达到指定阈值。广泛用于懒加载、无限滚动、广告曝光统计、动画触发等场景。相比传统scroll事件+getBoundingClientRect方案，IntersectionObserver性能更优，因为它在浏览器合成线程中工作，不阻塞主线程。
threshold 阈值是什么？如何理解？
threshold（阈值）定义了目标元素与root交叉比例达到多少时触发回调。取值范围0~1。
• threshold: 0 — 元素任意像素进入root区域即触发（默认行为）。
• threshold: 0.5 — 元素50%进入root区域时触发。
• threshold: 1 — 元素100%完全位于root区域内才触发。
• threshold: [0, 0.25, 0.5, 0.75, 1] — 数组形式，在多个交叉比例点都会触发回调，适合需要精细控制进出状态的场景。
注意：threshold为0时，即使只有1px交叉也会触发；threshold为1时要求元素完全在root内。
• threshold: 0 — 元素任意像素进入root区域即触发（默认行为）。
• threshold: 0.5 — 元素50%进入root区域时触发。
• threshold: 1 — 元素100%完全位于root区域内才触发。
• threshold: [0, 0.25, 0.5, 0.75, 1] — 数组形式，在多个交叉比例点都会触发回调，适合需要精细控制进出状态的场景。
注意：threshold为0时，即使只有1px交叉也会触发；threshold为1时要求元素完全在root内。
rootMargin 有什么作用？
rootMargin（根边距）用于扩展或收缩root元素的判定区域，格式与CSS margin相同。
• 正值（如"50px"）：将root判定区域向外扩展50px。元素在进入root前50px就会被判定为"进入"，常用于预加载。
• 负值（如"-30px"）：将root判定区域向内收缩30px。元素需要深入root内部30px后才被判定为"进入"，确保元素确实在用户视野中。
• 非对称（如"10px 20px 30px 40px"）：分别设置上右下左。
常见用法：懒加载图片时设置rootMargin: "200px"可在图片进入视口前200px就开始加载。
• 正值（如"50px"）：将root判定区域向外扩展50px。元素在进入root前50px就会被判定为"进入"，常用于预加载。
• 负值（如"-30px"）：将root判定区域向内收缩30px。元素需要深入root内部30px后才被判定为"进入"，确保元素确实在用户视野中。
• 非对称（如"10px 20px 30px 40px"）：分别设置上右下左。
常见用法：懒加载图片时设置rootMargin: "200px"可在图片进入视口前200px就开始加载。
isIntersecting 和 intersectionRatio 的区别？
• isIntersecting：布尔值，表示目标元素是否与root有交叉（即threshold条件是否满足）。最常用、最直观的判断属性。
• intersectionRatio：0~1之间的浮点数，表示目标元素与root的实际交叉比例。例如0.75表示75%的目标元素在root区域内。
简单来说：isIntersecting告诉你"是否进入"，intersectionRatio告诉你"进入了多少"。对于threshold: [0, 0.5, 1]，当intersectionRatio从0.3变为0.6时会在0.5处触发回调。
• intersectionRatio：0~1之间的浮点数，表示目标元素与root的实际交叉比例。例如0.75表示75%的目标元素在root区域内。
简单来说：isIntersecting告诉你"是否进入"，intersectionRatio告诉你"进入了多少"。对于threshold: [0, 0.5, 1]，当intersectionRatio从0.3变为0.6时会在0.5处触发回调。
IntersectionObserver 的典型应用场景？
6大典型应用：
① 图片懒加载 — 元素进入视口前开始加载图片，节省带宽。
② 无限滚动 — 检测底部哨兵元素，触发加载更多数据。
③ 广告曝光统计 — 广告元素达到一定可见比例时上报曝光。
④ 动画触发 — 元素进入视口时播放入场动画。
⑤ 视频自动播放/暂停 — 视频滚出视口时自动暂停。
⑥ 性能优化 — 仅渲染可视区域内的DOM（虚拟滚动）。
① 图片懒加载 — 元素进入视口前开始加载图片，节省带宽。
② 无限滚动 — 检测底部哨兵元素，触发加载更多数据。
③ 广告曝光统计 — 广告元素达到一定可见比例时上报曝光。
④ 动画触发 — 元素进入视口时播放入场动画。
⑤ 视频自动播放/暂停 — 视频滚出视口时自动暂停。
⑥ 性能优化 — 仅渲染可视区域内的DOM（虚拟滚动）。
如何选择 root 元素？null 代表什么？
root 参数指定了判定交叉的参考容器。
• root: null（默认）— 使用浏览器视口（viewport）作为root。这是最常见的选择。
• root: document.querySelector('.scroll-container') — 使用指定的可滚动DOM元素作为root。适用于页面内嵌滚动区域。
注意事项：自定义root元素必须具有明确的overflow样式（如overflow: auto或scroll），且其overflow不能是visible。IntersectionObserver使用root的border-box作为判定区域。
• root: null（默认）— 使用浏览器视口（viewport）作为root。这是最常见的选择。
• root: document.querySelector('.scroll-container') — 使用指定的可滚动DOM元素作为root。适用于页面内嵌滚动区域。
注意事项：自定义root元素必须具有明确的overflow样式（如overflow: auto或scroll），且其overflow不能是visible。IntersectionObserver使用root的border-box作为判定区域。
应用启动处理器演示 - 焦点现有窗口
配置Launch Handler使PWA应用在重复点击时聚焦到已开窗口，而不是新建窗口。
Particles.js 配置生成器 - 粒子背景可视化定制
调整粒子数量、形状、颜色、连线等参数，实时预览粒子背景效果，导出 Particles.js 配置 JSON。
有机形状/气泡生成器 - CSS border-radius 不规则圆形
拖拽控制点创建不规则、有机感的圆角形状，生成对应的 border-radius 代码。
元素发射光谱查看器 - 特征谱线图示
选择元素，显示其在可见光范围内的特征明线光谱，理解原子结构和光谱分析。
植物细胞结构标注器 - 点击部件高亮
完整的植物细胞图，点击或悬停任一部分（如叶绿体），显示其名称和功能说明。
波尔原子模型展示 - 电子层排布动画
选择元素，显示其原子核和电子在壳层上的分布，按波尔模型简要展示。
涟漪触摸效果生成器 - Material点击波纹
生成触击按钮时水波扩散的CSS动画及事件绑定代码，增强移动端反馈。
Monorepo 依赖图生成器 - 可视化包间关系
上传或输入 lerna.json / workspace 配置，生成交互式依赖关系图。
音乐风格小试验 - 上传片段判断流派
上传很短的音乐片段，使用简单的音频特征分析预测流派。
反应扩散系统模拟器 - Gray-Scott 模型图案生成
运行 Gray-Scott 反应扩散模型，调节参数生成斑点、条纹等生物斑图。
JSON 试题生成器 - 自定义题库随机组卷
上传 JSON 格式题库，随机抽取指定数量题目生成在线测验，自动评分和解析。
WebAuthn模拟器 - 创建与验证凭据
使用CTAP2模拟器或安全密钥在浏览器中体验无密码注册与认证流程。
Graphviz DOT渲染 - 关系图在线预览
编写DOT语言描述节点与边，前端渲染为有向图/无向图，辅助关系梳理。
费曼图简易绘制器 - 粒子交互可视化
用箭头和波浪线在Canvas上绘制基本粒子反应费曼图，支持电子、光子等。
随机用户信息生成器 - Mock数据在线生成
生成随机的姓名、邮箱、地址、电话等用户信息，支持自定义字段和批量输出JSON数组，用于测试填充。
JSON Schema 假数据生成器 - 按定义创建莫克数据
定义JSON Schema结构，自动填充符合类型与格式的随机数据，支持导出大文件用于压力测试。
DBSCAN 聚类可视化器 - 密度可达交互演示
在二维平面上点击生成数据点，调节Eps与MinPts参数，实时查看DBSCAN聚类结果与噪点识别。
棒针图解阅读器 - 符号高亮当前行
加载棒针文字图解，高亮正在编织的当前行，手动推进，辅助跟解。
Web Storage 配额模拟器 - 测试存储超限行为
模拟 LocalStorage 或 IndexedDB 写满配额，测试错误处理并显示剩余空间估算。
随机和弦进行生成器 - 作曲编曲灵感启发
选择调性与风格，随机生成常用和弦走向，显示指法图与MIDI播放，突破创作瓶颈。
正弦波生成与听力测试 - 扫频及固定频率
生成指定频率和振幅的纯正弦波，支持左右声道独立控制和听力阈值自测。
焦点指示器可见性检查 - 模拟键盘 Tab 导航轮廓
在可聚焦元素间 Tab 切换，高亮显示默认焦点轮廓，检查自定义样式是否提供可见指示。
莫氏硬度交互表 - 矿物相互刮擦演示
点击两种矿物，显示谁能在谁表面留下划痕，学习莫氏硬度顺序。
ConfigMap 生成器 - 从键值对快速生成 Kubernetes 资源
输入键值对，自动生成 Kubernetes ConfigMap YAML，支持文字和多行数据。
虚拟信用卡号生成 - 测试用有效Luhn卡号
生成通过Luhn算法校验但无实际金钱的卡片号码，附带有效日期供开发测试。
电场线模拟器 - 点电荷布局
放置正负点电荷，显示电势面和电场线，感受库仑力方向。
焦点指示器样式定制器 - 生成 :focus-visible 样式
实时调整焦点轮廓的颜色、粗细和偏移，生成美观且高对比度的焦点样式代码。
文件大小可视化 - 相对体积气泡图
选择多个本地文件，以气泡面积表示相对大小，直观呈现项目静态资源占比。
环绕声测试工具 - 移动声源空间定位
使用HRTF处理让声源像在头部周围旋转，检查立体声/环绕声设备空间感受。