目录

IntersectionObserver

has.createIntersectionObserver

has.createIntersectionObserver(Object component, Object options): IntersectionObserver

创建并返回一个IntersectionObserver对象实例。

ASCF的观察器使用Web原生模式，和三方存在差异，具体差异为：

Web原生观察器调用relativeTo设置的参照区域不能超出节点区域的范围。Web原生观察器相关信息可参考 IntersectionObserver 文档。

起始版本： 1.0.4

参数：

参数 类型 必填 描述
component Object 是 自定义组件实例。
options Object 否 选项。

options说明：

参数 类型 默认值 必填 描述
thresholds Array<number> [0] 否 一个数值数组，包含所有阈值，有效值在[0, 1.0]区间。
initialRatio number 0 否 初始的相交比例，如果调用时检测到的相交比例与这个值不相等且达到阈值，则会触发一次监听器的回调函数，有效值在[0, 1.0]区间。
observeAll boolean false 否

是否同时观测多个目标节点（而非一个），如果设为true ，observe的targetSelector将选中多个节点。

注意，同时选中过多节点将影响渲染性能。

返回值：

返回IntersectionObserver对象。

示例：

const observer = has.createIntersectionObserver(this, {
  thresholds: [0],
  initialRatio: 0,
  observeAll: true
});

IntersectionObserver

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

起始版本： 1.0.4

[h2]IntersectionObserver.disconnect

IntersectionObserver.disconnect()

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

起始版本： 1.0.4

示例：

const observer = has.createIntersectionObserver(this, {
  thresholds: [0],
  initialRatio: 0,
  observeAll: true
});
observer.disconnect();

[h2]IntersectionObserver.observe

IntersectionObserver.observe(string targetSelector, function callback)

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

起始版本： 1.0.4

参数：

参数 类型 必填 描述
targetSelector string 是 选择器。
callback function 否 监听相交状态变化的回调函数。

callback返回值：

返回Object对象，包括以下字段。

参数 类型 描述
id string 节点ID。
dataset Record<string,any> 节点的自定义数据属性。
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 下边界。
width number 宽度。
height number 高度。

示例：

const observer = has.createIntersectionObserver(this, {
  thresholds: [0],
  initialRatio: 0,
  observeAll: true
});

observer
  .relativeTo('.scroll-view_H', {
    left: -50,
    right: -50
  })
  .observe('.demo-text-2', (res) => {
    console.info('observe:', res);
  });

[h2]IntersectionObserver.relativeTo

IntersectionObserver.relativeTo(string selector, Object margins): IntersectionObserver

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

起始版本： 1.0.4

参数：

参数 类型 必填 描述
selector string 是 选择器。
margins object 否 用于扩展（或收缩）参照节点布局区域的边界。

margins说明：

参数 类型 描述
left number 节点布局区域的左边界。
right number 节点布局区域的右边界。
top number 节点布局区域的上边界。
bottom number 节点布局区域的下边界。

返回值：

返回IntersectionObserver对象。

示例：

const observer = has.createIntersectionObserver(this, {
  thresholds: [0],
  initialRatio: 0,
  observeAll: true
});

observer
  .relativeTo('.scroll-view_H', {
    left: -50,
    right: -50
  })
  .observe('.demo-text-2', (res) => {
    console.info('observe:', res);
  });

[h2]IntersectionObserver.relativeToViewport

IntersectionObserver.relativeToViewport(Object margins): IntersectionObserver

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

起始版本： 1.0.4

参数：

参数 类型 必填 描述
margins object 否 用来扩展（或收缩）参照节点布局区域的边界。

margins说明：

参数 类型 描述
left number 节点布局区域的左边界。
right number 节点布局区域的右边界。
top number 节点布局区域的上边界。
bottom number 节点布局区域的下边界。

返回值：

返回IntersectionObserver对象。

示例：

const observer = has.createIntersectionObserver(this, {
  thresholds: [0],
  initialRatio: 0,
  observeAll: true
});

observer
  .relativeToViewport({
    left: -50,
    right: -50
  })
  .observe('.demo-text-2', (res) => {
    console.info('observe:', res);
  });