Scroll Fire Directive

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

TIP

There is also a Scroll directive which fires whenever user scrolls the page.

Installation

Quasar CLI

UMD

Vue CLI

// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    directives: [
      'ScrollFire'
    ]
  }
}

Usage

IMPORTANT

For performance purposes, the scroll listener function injected is by default debounced by 50ms.

Determining Scrolling Container

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

ScrollFire API

Ready for more?