This is a Vue directive which takes one parameter (a Function) and fires when user scrolls the page containing that DOM node.
TIPS
- 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.