canvas-watch

canvas-watch 是一个框架无关的库，旨在处理浮动元素（如粘性导航栏或停靠播放器）与背景触发区域之间的2D重叠检测。不同于 IntersectionObserver（仅比较元素与其滚动祖先或视口的关系），canvas-watch 通过比较边界矩形来判断浮动元素当前位于哪个背景区域之上。 主要功能包括： - 自动类切换：标记为“被监听”的元素会根据其重叠最多的触发区域获得 `over-*` 类（默认阈值50%）。 - 嵌套支持：嵌套的触发区域优先于其容器，允许在复杂布局中进行更精确的样式控制。 - 视口追踪：可响应式追踪参考元素相对于视口的位置（上方、内部、下方或不可见）。 - 性能优化：使用单个 requestAnimationFrame 循环和 IntersectionObserver 作为可见性门控，确保仅对屏幕内元素执行重叠计算。 - 事件系统：每当应用的类发生变化时，会派发 `canvaschange` 自定义事件，支持超越CSS的逻辑处理。 该库提供框架无关的核心模块及专用 Svelte 适配器，支持 SSR，兼容所有现代常青浏览器。