assignment_late
Why donate
travel_explore
API Explorer
code
How to contribute
tune
Options & Helpers
style
Style & Identity
view_quilt
Layout and Grid
widgets
Vue Components
extension
Quasar Plugins
developer_mode
Vue Composables
security
Security
build
Quasar CLI (with Vite)
build
Quasar CLI (with Webpack)
stars
Icon Genie CLI
healing
Quasar Utils
note_add
App Extensions
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.
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.
Loading Scroll API...
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.
Ready for more?
Caught a mistake?Edit this page in browser
1. Introduction
2. Scroll API
3. Usage
3.1. Determining Scrolling Container
Copyright © 2015-present PULSARDEV SRL, Razvan Stoenescu