Directive "v-scroll"     

This is a Vue directive which takes one parameter (a Function) and fires when user scrolls the page containing that DOM node.

One alternative to using this directive is to place a QScrollObservable component on your page.

Installation

Edit /quasar.conf.js:

framework: {
  directives: ['Scroll']
}

Basic Usage

<!-- Template for VueModel below -->
...
<div v-scroll="scrolled">...</div>
...
// VueModel for template above
{
  ...,
  methods: {
    ...,
    scrolled (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.
    }
  }
}

IMPORTANT
Please note that by default the method called is not debounced. For that you have to do it yourself, by wrapping your method with Quasar’s debouncer (as an example) like in example below.

Read more about debouncing here.

import { debounce } from 'quasar'

export default {
  ...,
  methods: {
    ...,
    scrolled: debounce(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.
    }, 200) // debounce for 200ms
  }
}

NOTE
There is one more scrolling-related directive available called “Scroll Fire” described on its own documentation page. Read more here.

Determining Scrolling Container

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

Scroll Observable Infinite Scroll
Last updated: Sat May 19 2018
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub