在小程序内监听元素是否可见

小程序 IntersectionObserver API 文档

例如下方的代码：

IntersectionObserver

wx.createIntersectionObserver()
  .relativeToViewport({ bottom: 100 })
  .observe(".target-class", (res) => {
    res.intersectionRatio; // 相交区域占目标节点的布局区域的比例
    res.intersectionRect; // 相交区域
    res.intersectionRect.left; // 相交区域的左边界坐标
    res.intersectionRect.top; // 相交区域的上边界坐标
    res.intersectionRect.width; // 相交区域的宽度
    res.intersectionRect.height; // 相交区域的高度
  });

通过 wx.createIntersectionObserver(Object component, Object options)创建一个观察对象，再通过这个观察对象的 relativeToViewport 方法对指定的一个 dom 元素进行视窗的相交比对，我们可以得到这个 dom 元素和视窗的相交比例、相较区域、相交区域的坐标、宽度和高度。

intersectionRatio 的返回结果为 0 或 1，当 intersectionRatio === 0 时，表示这个 dom 元素和视窗完全不相交，为 1 则表示这个 dom 元素和视窗相交，即这个 dom 元素当前可见。

示例代码片段，点击查看

预览效果

延伸的应用：通过监听元素是否可见，可以实现比如 sticky 粘性布局、无限加载等需求。

---

完结，撒花