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 --> |
// VueModel for template above |
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.
As per the example below, you need to usefunction (position) {}
orposition => {}.bind(this)
to be able to access the Vue component inside the debounce function.
Read more aboutdebouncing
here.
import { debounce } from 'quasar' |
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.