IntersectionObserver - 开发文档

IntersectionObserver

IntersectionObserver 对象，用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。

方法

IntersectionObserver IntersectionObserver.relativeTo(String selector, Object margins)

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

参数

参数	类型	默认值	必填	说明
selector	String		是	选择器
margins	Object		是	用来扩展（或收缩）参照节点布局区域的边界

margins

属性	类型	默认值	必填	说明
left	Number		否	节点布局区域的左边界
right	Number		否	节点布局区域的右边界
top	Number		否	节点布局区域的上边界
bottom	Number		否	节点布局区域的下边界

IntersectionObserver IntersectionObserver.relativeToViewport(Object margins)

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

参数

参数	类型	默认值	必填	说明
margins	Object		是	用来扩展（或收缩）参照节点布局区域的边界

margins

属性	类型	默认值	必填	说明
left	Number		否	节点布局区域的左边界
right	Number		否	节点布局区域的右边界
top	Number		否	节点布局区域的上边界
bottom	Number		否	节点布局区域的下边界

IntersectionObserver.observe(String targetSelector, Function callback)

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

参数

参数	类型	默认值	必填	说明
targetSelector	String		是	选择器
callback	Function		是	用来扩展（或收缩）参照节点布局区域的边界

IntersectionObserver.observe.callback(Object res)

属性	类型	说明
id	String	节点 ID
dataset	Object	节点自定义数据属性键值对
intersectionRatio	Number	相交比例
intersectionRect	Object	相交区域的边界
boundingClientRect	Object	目标边界
relativeRect	Object	参照区域的边界
time	Number	相交检测时的时间戳

intersectionRect

属性	类型	说明
left	Number	左边界
right	Number	右边界
top	Number	上边界
bottom	Number	下边界
width	Number	宽度
height	Number	高度

boundingClientRect

属性	类型	说明
left	Number	左边界
right	Number	右边界
top	Number	上边界
bottom	Number	下边界
width	Number	宽度
height	Number	高度

relativeRect

属性	类型	说明
left	Number	左边界
right	Number	右边界
top	Number	上边界
bottom	Number	下边界

IntersectionObserver.disconnect()

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