QIntersection 元件本質上是 Intersection 指令 的包裝器，額外的好處是它可以自行處理狀態（不需要您手動添加和處理），並且可以選擇性地具有顯示/隱藏過渡效果。
然而，使用 QIntersection 的主要好處是，DOM 樹會從隱藏節點中釋放出來，從而使用最少的 RAM 記憶體，並使頁面感覺非常快速。此外，您可以為包裝器元素指定 tag 屬性以符合您的需求，從而消除另一個 DOM 節點。
在底層，它使用 Intersection Observer API。
警告
並非所有瀏覽器都支援 Intersection Observer API。大多數現代瀏覽器都支援，但其他瀏覽器則不支援。如果您需要支援舊版瀏覽器，您可以安裝並匯入（到啟動檔案中）W3C 官方 polyfill。
用法
警告
在大多數情況下，需要您將 CSS 應用於 QIntersection 元素，使其在內部內容未呈現時充當必要的填充物。這將允許流暢的滾動體驗，否則滾動將會不穩定地跳動。
例如，這樣需要的 CSS 範例可以是固定高度或至少最小高度（甚至可能是固定寬度，如下列範例所示，其中多個 QIntersection 可以顯示在同一行中）。
警告
如果使用 transition prop，則需要將內容包裝在一個且僅一個元素中。
提示
在某些邊緣情況下，預設的 viewport 可能無法運作。例如，當您的程式碼託管在 iframe 中時（例如 Codepen）。這時您需要使用 root 屬性。它允許您將 viewport 的替代方案定義為您的 root（透過其 DOM 元素）。重要的是要記住，root 需要是觀察元素的祖先。
基本
帶有過渡效果
在下面的範例中，我們使用了 Quasar 過渡效果。如需完整列表，請前往過渡效果頁面。
僅限一次
然而，僅觸發一次意味著您失去了釋放 DOM 樹的好處。無論可見性如何，內容都將保留在 DOM 中。
下面的範例使用 root 屬性，因此可以在 Codepen 中看到（它託管在 iframe 中）。