QScrollObserver是Quasar组件，每当用户滚动页面或应用了.scrollCSS类的溢出容器时，它都会发出scroll事件。

QScrollObserver API

用法

滚动此页面以查看下面的示例。

滚动容器确定

Quasar中的所有组件或指令都有一个简单的算法来确定支持滚动的容器： -如果组件上有scroll-target属性，那么它将尝试将其用作滚动容器 -然后，它会搜索一个父DOM元素，该元素具有 scroll、scroll-y或overflow-auto Quasar CSS辅助类， -如果未找到，则认为滚动发生在文档本身上。

例如，QScrollArea等组件尊重这种设计，并且嵌入了scroll类，以便QScrollObservable（或任何其他滚动组件或指令）可以成功检测到它并附加必要的事件处理程序。

请注意，如果各个元素没有溢出（例如：CSSoverflow：hidden和小于内部高度的高度），将scrollCSS类简单附加到DOM元素或Vue组件上不会产生任何效果。

优质容器示例：

<!--
  uasar的CSS辅助类'overflow-hidden'
  等同于style="overflow: hidden"
-->
<div class="scroll overflow-hidden" style="height: 100px">
  ...content expanding over the 100px height from container...
  <q-scroll-observer @scroll="scrollHandler" />

  <!-- 使用`v-scroll`指令的例子 -->
  <div v-scroll="scrollHandler">...</div>
</div>

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>

水平

为了捕获水平滚动，请使用axis="horizontal"属性：

<q-scroll-observer axis="horizontal" @scroll="scrollHandler" />

布局滚动

当在有页面的布局上滚动时，相对于注入QScrollObservable（通过这样做注册更多的滚动事件），您可以直接在定义布局的组件上利用QLayout的@scroll事件。

<q-layout @scroll="scrollHandler">...</q-layout>