Scroll Fire     

“Scroll Fire” is a feature that enables a method to be called (once and only once) when user scrolls current page and the DOM element (or component) that it is applied to comes into the viewport.

For ease of use, its implementation is through a Vue Directive called v-scroll-fire.

There is also a v-scroll directive which fires whenever user scrolls the page, available to read here..


Edit /quasar.conf.js:

framework: {
directives: ['ScrollFire']

Basic Usage

<!-- Template for VueModel below -->
<div v-scroll-fire="bounceImage">...</div>
// VueModel for template above
methods: {
bounceImage (element) {
// in this example, when the `<div>` comes into view,
// we bounce it for 2 seconds

// we add helper `nimate-bounce` Quasar CSS class
setTimeout(() => {
// we make sure the node is still in DOM
// (user hasn't navigated away from the Vue component
// rendering our `<div>`)
// so we don't generate an error
if (document.body.contains(element)) {
// then remove the helper class to
// stop bouncing
}, 2000)

For performance purposes, the scroll listener function injected is by default debounced by 50ms. Read more about debouncing here.

Determining Scrolling Container

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