输出

IntersectionObserver 对象的方法列表

方法名	返回值	描述
relativeTo	IntersectionObserver 实例本身	使用选择器指定一个节点，作为参照区域之一
relativeToViewport	IntersectionObserver 实例本身	指定页面显示区域作为参照区域之一
observe		指定目标节点并开始监听相交状态变化情况
disconnect		停止监听，回调函数将不再触发

IntersectionObserver.relativeTo(selector, margins)

使用选择器指定一个节点，作为参照区域之一

参数说明

String selector

选择器

Object margins

用来扩展（或收缩）参照节点布局区域的边界

参数名称	数据类型	属性	描述
left	Number	optional	节点布局区域的左边界
right	Number	optional	节点布局区域的右边界
top	Number	optional	节点布局区域的上边界
bottom	Number	optional	节点布局区域的下边界

IntersectionObserver.relativeToViewport(margins)

指定页面显示区域作为参照区域之一

参数说明

Object margins

用来扩展（或收缩）参照节点布局区域的边界

参数名称	数据类型	属性	描述
left	Number	optional	节点布局区域的左边界
right	Number	optional	节点布局区域的右边界
top	Number	optional	节点布局区域的上边界
bottom	Number	optional	节点布局区域的下边界

IntersectionObserver.observe(targetSelector, callback)

指定目标节点并开始监听相交状态变化情况

参数说明

String targetSelector

选择器

Function callback

监听相交状态变化的回调函数

callback 返回对象的属性

属性名称	数据类型	描述
intersectionRatio	Number	相交比例
intersectionRect	Object	相交区域的边界
boundingClientRect	Object	目标边界
relativeRect	Object	参照区域的边界
time	Number	相交检测时的时间戳

intersectionRect、boundingClientRect、relativeRect 结构说明

属性名称	类型	描述
left	Number	左边界
right	Number	右边界
top	Number	上边界
bottom	Number	下边界

//也可以使用 this.createIntersectionObserver({selectAll}) 来创建
tt.createIntersectionObserver(this, {
    selectAll: true
})
.relativeTo('.container')
.observe('.ball', res => {
    res.intersectionRect  // 相交区域
    res.intersectionRect.left  // 相交区域的左边界坐标
    res.intersectionRect.top  // 相交区域的上边界坐标
    res.intersectionRect.width  // 相交区域的宽度
    res.intersectionRect.height  // 相交区域的高度
});

IntersectionObserver.disconnect()

停止监听。回调函数将不再触发

原文: https://developer.toutiao.com/docs/api/createIntersectionObserver.html