“Intersection”是Quasar指令，当用户滚动并且将其应用到的DOM元素（或组件）进入或退出视区时，可以调用一个方法。
在底层，它使用Intersection Observer API。
WARNING
并非所有浏览器都支持Intersection Observer API。 大多数现代浏览器都可以，但是其他浏览器，如IE 11，却没有。 如果需要支持较旧的浏览器，则可以安装和导入（到启动文件中）官方的W3C polyfill。
Intersection API
用法
首先，请阅读Intersection Observer API，这对于您理解此指令的工作方式是最好的。
Intersection指令将handler函数或对象作为参数。 对象形式如下所示：
{
handler: /* 函数 */,
cfg: {
// "Intersection observer options"中的任何选项
// 参考https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
root: null, // DOM Element
rootMargin: '0px',
threshold: 0
}
}
当使用对象形式时，只有handler键是必需的。
handler函数采用一个参数，即IntersectionObserverEntry.
TIP
在以下示例中滚动，直至观察到元素为止。 然后将其滚动到视图之外。
基础
触发一次
该指令可与once修饰符一起使用（例如：v-intersection.once）。 一旦侦听的元素出现，handler函数将被调用，侦听将停止。 这使您可以控制处理开销, 如果在侦听的元素开始在屏幕上可见时您需要的只是被通知。
使用对象
通过传入对象作为指令的值（而不是函数），您可以控制“Intersection Observer”的所有选项（例如阈值）。
高级
下面是您可以做什么的更高级的示例。 该代码利用了HTML的data属性。 基本上，在循环中设置data-id为元素的索引，索引值可以通过将传递给处理程序的entry的entry.target.dataset.id来获取。 如果您不熟悉data属性，可以在此处 阅读更多有关使用data属性的信息。
在下面的示例中，我们显示了多张卡片，但是只有可见的卡片被渲染。 秘诀在于包裹容器上有v-intersection并有固定的高度和宽度（当内部内容未渲染时，它充当了必要的填充物，因此滚动不会不规律地跳动）。
也可以使用QIntersection组件编写以下示例，这使一切变得更加容易。
TIP
在上面的示例中，我们使用了Quasar过渡。 有关完整列表，请转到过渡页面。