QScrollObserver 是一个 Quasar 组件，它在用户滚动页面或应用了 .scroll CSS 类的溢出容器时，会发出一个 scroll 事件。
用法
滚动此页面以查看下面的示例。
确定滚动容器
Quasar 中的所有组件或指令都具有一个简单的算法来确定支持滚动的容器
- 如果组件上存在
scroll-target属性，则它会尝试将其用作滚动容器 - 然后它会搜索具有
scroll、scroll-y或overflow-autoQuasar CSS 辅助类的父 DOM 元素， - 如果未找到，则它认为滚动发生在文档本身。
例如，QScrollArea 等组件尊重此设计，并在其中嵌入了 scroll 类，以便 QScrollObservable（或任何其他滚动组件或指令）可以成功检测到它，并将其所需的事件处理程序附加到它。
请注意，如果相应的元素没有溢出（例如，带有：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