import { IntersectionEvent } from "./IntersectionEvent";
import { IntersectionRelativeMargins } from "./IntersectionRelativeMargins";
/**
 * IntersectionObserver 对象，用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。
 */
export interface IntersectionObserver {
    /**
     * 使用选择器指定一个节点，作为参照区域之一。
     * @param selector 选择器
     * @param margins 用来扩展（或收缩）参照节点布局区域的边界
     * @returns
     */
    relativeTo(selector: string, margins?: IntersectionRelativeMargins): this;
    /**
     * 指定页面显示区域作为参照区域之一。
     * @param margins 用来扩展（或收缩）参照节点布局区域的边界
     * @returns
     *
     * @example
     * ```javascript
     * // 下面的示例代码中，如果目标节点（用选择器 .target-class 指定）进入显示区域以下 100px 时，就会触发回调函数。
     * ks.createIntersectionObserver()
     *     .relativeToViewport({
     *         bottom: 100,
     *     })
     *     .observe('.target-class', (res) => {
     *         res.intersectionRatio; // 相交区域占目标节点的布局区域的比例
     *         res.intersectionRect; // 相交区域
     *         res.intersectionRect.left; // 相交区域的左边界坐标
     *         res.intersectionRect.top; // 相交区域的上边界坐标
     *         res.intersectionRect.width; // 相交区域的宽度
     *         res.intersectionRect.height; // 相交区域的高度
     *     });
     *
     * ```
     *
     */
    relativeToViewport(margins?: IntersectionRelativeMargins): this;
    /**
     * 指定目标节点并开始监听相交状态变化情况。
     * @param selector 选择器
     * @param callback 监听相交状态变化的回调函数
     * @returns
     */
    observe(selector: string, callback: (event: IntersectionEvent) => void): this;
    /**
     * 停止监听。回调函数将不再触发。
     */
    disconnect(): void;
}