For AI agents: the complete documentation index is available at /next/zh/llms.txt, the full documentation bundle is available at /next/zh/llms-full.txt, and this page is available as Markdown at /next/zh/api/lynx-api/intersection-observer/intersection-observer-observe.md.
Lynx
  • 简体中文
  • IntersectionObserver: observe() method

    observe 指定目标节点与回调,目标节点根据 id 指定。

    语法

    observe(selector: string, callback: Function): void;

    参数

    selector

    selector: string;

    指定查找目标节点时使用的 id,优先在创建 IntersectionObserver 对象时传入的 component 中查找,查找不到再进行全局查找,全局查找不到则指定失效。

    callback

    callback: (res) => {};

    指定目标节点与参照节点的交叉状态发生变化时触发的回调。 回调参数 res 的格式如下:

    {
        "isIntersecting": boolean,      // 目标节点与参照节点是否相交
        "intersectionRatio": number,    // 目标节点与参照节点的相交比例
        "intersectionRect": object,     // 目标节点与参照节点的相交区域
        "boundingClientRect": object,   // 目标节点的相交区域
        "relativeRect": object,         // 参照节点的相交区域
        "observerId": string,           // 目标节点的 id
        "time": number,                 // 相交检测时的时间戳(未实现,现在返回均为 0)
    }

    其中 intersectionRectboundingClientRectrelativeRect 的结构相同,坐标系均是相对于 LynxView,即 LynxView 左上角为坐标系原点,以水平向右为 x 轴正向,竖直向下为 y 轴正向:

    {
        "left": number | 0,             // 相交区域的左边界
        "right": number | 0,            // 相交区域的右边界
        "top": number | 0,              // 相交区域的上边界
        "bottom": number | 0,           // 相交区域的下边界
    }

    返回值

    无(undefined)。

    兼容性

    LCD tables only load in the browser

    除非另有说明,本项目采用知识共享署名 4.0 国际许可协议进行许可,代码示例采用 Apache License 2.0 许可协议进行许可。