Directive v-scroll | Quasar Framework

One alternative to using this directive is to place a QScrollObserver component on your page.
There is one more scrolling-related directive available called Scroll Fire.

Usage

<template>
  ...
  <div v-scroll="onScroll">...</div>
  ...
</template>

<script>
export default {
  setup () {
    function onScroll (position) {
      // when this method is invoked then it means user
      // has scrolled the page to `position`
      //
      // `position` is an Integer designating the current
      // scroll position in pixels.
    }

    return { onScroll }
  }
}
</script>

import { debounce } from 'quasar'

export default {
  setup () {
    function onScroll (position) {
      // when this method is invoked then it means user
      // has scrolled the page to `position`
      //
      // `position` is an Integer designating the current
      // scroll position in pixels.
    }

    return {
      onScroll: debounce(onScroll, 200) // debounce for 200ms
    }
  }
}

Determining Scrolling Container

Please read here about how Quasar determines the container to attach scrolling events to.

Caught a mistake?Edit this page in browser

1. Introduction

2. Scroll API

3. Usage

3.1. Determining Scrolling Container