滚动监听器

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

QScrollObserver API

用法

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




滚动容器确定

Quasar中的所有组件或指令都有一个简单的算法来确定支持滚动的容器: -如果组件上有scroll-target属性,那么它将尝试将其用作滚动容器 -然后,它会搜索一个父DOM元素,该元素具有 scrollscroll-yoverflow-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>