QIntersection 组件本质上是 交叉点指令 的封装器，它还有一个额外的优势，那就是它可以自行处理状态（不需要你手动添加和处理），并且还可以选择显示/隐藏过渡效果。
¥The QIntersection component is essentially a wrapper over the Intersection directive with the added benefit that it handles the state by itself (does not require you to add it and handle it manually) and can optionally have a show/hide transition as well.
然而，使用 QIntersection 的主要好处是，DOM 树不再包含隐藏节点，从而尽可能减少 RAM 内存的使用，使页面显示更加流畅。此外，你还可以根据自己的需求为封装器元素指定 tag 属性，从而消除另一个 DOM 节点。
¥The main benefit of using QIntersection is, however, that the DOM tree is freed up of hidden nodes thus using the minimum possible RAM memory and making the page feel very snappy. As well, you can specify the tag property for the wrapper element to match your own needs, thus eliminating yet another DOM node.
在底层，它使用 交叉点监视器 API。
¥Under the hood, it uses the Intersection Observer API.
警告
并非所有浏览器都支持 Intersection Observer API。大多数 现代浏览器 都支持，但其他浏览器不支持。如果你需要支持旧版浏览器，可以安装并导入（到启动文件中）官方 W3C polyfill。
¥Not all browsers support the Intersection Observer API. Most modern browsers do, but other browsers do not. If you need to support older browsers, you can install and import (into a boot file) the official W3C polyfill.
用法(Usage)
¥Usage
警告
大多数情况下，你需要将 CSS 应用于 QIntersection 元素，以便在内部内容未渲染时，它充当必要的填充。这将提供流畅的滚动体验，否则滚动会出现不规则的跳动。
¥In most cases, it is required that you apply CSS to the QIntersection element so that it acts as a necessary filler when the inner content is not rendered. This will allow for a smooth scrolling experience, because otherwise the scroll will jump erratically.
例如，需要的 CSS 示例包括固定高度或至少最小高度（甚至可能是固定宽度，如以下示例中所示，多个 QIntersection 可以显示在同一行）。
¥An example of such needed CSS would be, for example, a fixed height or at least a min-height (and possibly even a fixed width, as in the examples below, where multiple QIntersections can be displayed on same row).
危险
如果使用 transition 属性，则要求内容只能被包裹在一个元素中。
¥If using the transition prop, it is required that the content be wrapped in one and only one element.
提示
在某些特殊情况下，默认视口将无法工作。例如，当你的代码托管在 iframe 中（例如 Codepen）时。在这里你需要使用 root 属性。它允许你将视口的替代方案定义为根（通过其 DOM 元素）。请务必记住，根元素必须是被观察元素的祖级元素。
¥There are edge cases where the default viewport won’t work. For instance, when your code is hosted in an iframe (like Codepen). This is where you need to use the root property. It allows you to define an alternative to the viewport as your root (through its DOM element). It is important to keep in mind that root needs to be an ancestor of the observed element.
基本(Basic)
¥Basic
带过渡效果(With transition)
¥With transition
在下面的示例中，我们使用了 Quasar 过渡效果。要查看完整列表，请前往 过渡效果 页面。
¥In the example below we used a Quasar transition. For a full list, please head to Transitions page.
仅一次(Only once)
¥Only once
但是，仅触发一次意味着你将失去释放 DOM 树的优势。无论可见性如何，内容都将保留在 DOM 中。
¥Triggering only once means, however, that you lose the benefit of freeing up the DOM tree. The content will remain in DOM regardless of visibility.
以下示例使用了 root 属性，因此可以在 Codepen（托管在 iframe 中）中查看。
¥The example below uses the root property and therefore can be seen in a Codepen (which hosts in an iframe).