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

¥QScrollObserver is a Quasar component that emits a scroll event whenever the user scrolls the page or overflowed container with .scroll CSS class applied to it.

用法(Usage)

¥Usage

滚动此页面，查看下方示例的实际运行情况。

¥Scroll this page to see the example below in action.

确定滚动容器(Determining Scrolling Container)

¥Determining Scrolling Container

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

¥All components or directives in Quasar have a simple algorithm to determine the container that supports the scroll:

• 如果组件上存在 scroll-target 属性，则尝试将其用作滚动容器。

  ¥if a scroll-target property is available on the component then it tries to use it as scroll container

• 然后搜索附加了 scroll、scroll-y 或 overflow-auto Quasar CSS 辅助类的父 DOM 元素。

  ¥then it searches for a parent DOM element which has the scroll, scroll-y or overflow-auto Quasar CSS helper classes attached to it,

• 如果未找到，则认为滚动发生在文档本身。

  ¥if none is found, then it considers that the scrolling takes place on the document itself.

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

¥Components like QScrollArea, for example, respect this design and have the scroll class embedded into it, so that QScrollObservable (or any other scrolling component or directive) can successfully detect it and attach the necessary event handlers to it.

请注意，如果相应元素未溢出（例如：CSS overflow: hidden 且高度小于其内部内容高度），则简单地将 scroll CSS 类附加到 DOM 元素或 Vue 组件上将不起作用。

¥Please note that simply attaching scroll CSS class to a DOM element or on a Vue component will have no effect if the respective element is not overflowed (example, with: CSS overflow: hidden and a height smaller than its inner content height).

良好容器示例：

¥Example of good container:

<!--
  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>

另一个使用 QScrollArea 的示例：

¥One more example with 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>

水平(Horizontal)

¥Horizontal

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

¥For capturing horizontal scrolling, use the axis="horizontal" prop :

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

布局滚动(Layout Scrolling)

¥Layout Scrolling

在页面布局上滚动时，你可以直接在定义布局的组件上利用 QLayout 的 @scroll 事件，而无需注入 QScrollObservable（并注册额外的滚动事件）。

¥When scrolling on a Layout with a Page, rather than injecting a QScrollObservable (and by so doing registering additional scroll events) you can take advantage of QLayout´s @scroll event directly on your component defining the Layout.

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