QScrollObserver 是一個 Quasar 元件，每當使用者滾動頁面或套用 .scroll CSS 類別的溢位容器時，它會發出 scroll 事件。
用法
滾動此頁面以查看以下範例的實際效果。
判斷滾動容器
Quasar 中的所有元件或指令都有一個簡單的演算法來判斷支援滾動的容器
- 如果元件上有
scroll-target屬性，則它會嘗試將其用作滾動容器 - 然後它會搜尋具有附加
scroll、scroll-y或overflow-autoQuasar CSS 輔助類別的父 DOM 元素， - 如果找不到，則它會認為滾動發生在文件本身上。
例如，像 QScrollArea 這樣的元件，遵循此設計並將 scroll 類別嵌入其中，以便 QScrollObservable（或任何其他滾動元件或指令）可以成功偵測到它，並將必要的事件處理程序附加到它。
請注意，如果 respective 元素未溢位（例如，使用：CSS overflow: hidden 和高度小於其內部內容高度），則僅將 scroll CSS 類別附加到 DOM 元素或 Vue 元件將不會有任何效果。
良好容器範例
<!--
Quasar CSS helper 'overflow-hidden' is
equivalent to style="overflow: hidden"
-->
<div class="scroll overflow-hidden" style="height: 100px">
...content expanding over the 100px height from container...
<q-scroll-observer @scroll="scrollHandler" />
<!-- example with `v-scroll` directive -->
<div v-scroll="scrollHandler">...</div>
</div>content_paste
QScrollArea 的另一個範例
<q-scroll-area style="width: 400px; height: 500px;" class="bg-yellow">
...content expanding over the 500px height from container...
<q-scroll-observer @scroll="scrollHandler" />
</q-scroll-area>content_paste
水平
若要捕捉水平滾動，請使用 axis="horizontal" 屬性
<q-scroll-observer axis="horizontal" @scroll="scrollHandler" />content_paste
版面配置滾動
當在具有頁面的版面配置上滾動時，您可以利用 QLayout 的 @scroll 事件直接在定義版面配置的元件上，而不是注入 QScrollObservable（並因此註冊額外的滾動事件）。
<q-layout @scroll="scrollHandler">...</q-layout>content_paste