Skip to main content

use_near_viewport

Function use_near_viewport 

Source
pub fn use_near_viewport(
    target_id: String,
    root_margin: &'static str,
) -> ReadSignal<bool>
Expand description

观察指定 id 的元素是否进入「视口 + 提前量」范围;一旦相交就把返回的信号置为 true 并停止观察(单向激活,滚出视口不回退——调用方负责激活后的资源生命周期)。

  • 服务端永远返回 false:服务端不装观察器,水合首帧与 SSR 输出一致, 可见性判断只在水合之后的 Effect 里生效。
  • 浏览器不支持 IntersectionObserver 时保持 false:调用方必须提供交互式激活 兜底(点击/按钮),不能让目标永远无法激活。
  • 提前量由 root_margin 控制,默认约一个视口高度;调用方按移动端体验调整。

卸载安全:观察器与回调存放在 StoredValue::new_local 里,on_cleanup 断开连接; 回调触发的信号写入经 try_set,组件卸载后的迟到回调不会写已释放的信号。

约束:观察器只在首次 Effect 运行时按 target_id 查找元素并挂接,target_id 变化不会重连。调用方必须保证 id 在组件实例存续期内稳定,且目标元素在水合完成时 已在 DOM 中(当前 CodeRunner/post 容器均以确定性索引派生 id 且内容变化经 keyed 重建实例)。