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

用法

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

确定滚动容器

Quasar 中的所有组件或指令都有一个简单的算法来确定支持滚动的容器：

• 如果组件上有 scroll-target 属性，则尝试将其用作滚动容器
• 然后它会搜索具有 scroll、scroll-y 或 overflow-auto Quasar CSS 辅助类的父 DOM 元素
• 如果找不到，则认为滚动发生在文档本身上

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

请注意，如果相应元素没有溢出（例如，使用 CSS overflow: hidden 且高度小于其内部内容高度），则简单地将 scroll CSS 类附加到 DOM 元素或 Vue 组件上将不会产生任何效果。

良好容器的示例：

<!--
  Quasar CSS 辅助类 'overflow-hidden'
  等同于 style="overflow: hidden"
-->
<div class="scroll overflow-hidden" style="height: 100px">
  ...内容超出容器的 100px 高度...
  <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">
  ...内容超出容器的 500px 高度...
  <q-scroll-observer @scroll="scrollHandler" />
</q-scroll-area>

水平滚动

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

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

布局滚动

当在带有 Page 的 Layout 上滚动时，您可以直接在定义 Layout 的组件上利用 QLayout 的 @scroll 事件，而不是注入 QScrollObservable（从而注册额外的滚动事件）。

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