滚动侦听器(Scroll Observable)

QScrollObservable是一个Quasar组件，只要用户滚动了页面或溢出容器(应用“.scroll”CSS类)，就会触发scroll事件。

安装

编辑/quasar.conf.js：

framework: {
  components: ['QScrollObservable']
}

基础用法

<template>
  ...
  <q-scroll-observable @scroll="userHasScrolled" />
  ...
</template>

<script>
export default {
  ...,
  methods: {
    ...,
    userHasScrolled (scroll) {
      console.log(scroll)
      // {
      //   position: 56, // 像素,从顶部计算
      //   direction: 'down', // 'down' 或 'up'
      //   directionChanged: false, // 自从这个处理程序被调用后方向改变了？
      //   inflexionPosition: 56 // 用户改变滚动方向的最后滚动位置
      // }
    }
  }
}
</script>

滚动容器确定

Quasar中的所有组件或指令都有一个简单的算法来确定哪个是支持滚动的容器：它搜索父级DOM元素，该元素具有附加到其上的Quasar CSS辅助类scroll。 如果没有找到，则认为滚动发生在文档本身上。

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

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

优质容器示例：

<!--
  Quasar的CSS辅助类'overflow-hidden'等同于style="overflow: hidden"
-->
<div class="scroll overflow-hidden" style="height: 100px">
  ...content expanding over the 100px height from container...
  <q-scroll-observable @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-observable @scroll="scrollHandler" />
</q-scroll-area>

布局滚动

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

<q-layout @scroll="scrollHandler">...</q-layout>
视频嵌入 滚动指令