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 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.
}
</script><template>
...
<div v-scroll="onScroll">...</div>
...
</template>
<script setup>
import { debounce } from 'quasar'
const onScroll = 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
</script>Determining Scrolling Container
Please read here about how Quasar determines the container to attach scrolling events to.