“Intersection” is a Quasar directive that enables a method to be called when the user scrolls and the DOM element (or component) that it is applied to comes into or out of the viewport.

Under the hood, it uses the Intersection Observer API.

Usage

Reading the Intersection Observer API first will be best in your understanding of how this directive works.

Intersection directive takes either a handler function as an argument or an Object. The Object form looks like this:

{
  handler: /* Function */,
  cfg: {
    // any options from "Intersection observer options"
    // on https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
    root: null, // DOM Element
    rootMargin: '0px',
    threshold: 0
  }
}

When using the Object form, only the handler key is mandatory.

The handler Function takes one parameter, which is an IntersectionObserverEntry.

Basic

Trigger once

The directive can be used with the once modifier (ex: v-intersection.once). Once the observed element comes into view, the handler Function will be called and the observing will stop. This allows you to control the processing overhead if all you need is to be notified when the observed element starts to be visible on screen.

Using an Object

By passing in an Object as the directive’s value (instead of a Function), you can control all the options (like threshold) of the Intersection Observer.

Advanced

Below is a more advanced example of what you can do. The code takes advantage of the HTML data attribute. Basically, by setting data-id with the index of the element in a loop, this can be retrieved via the passed in entry to the handler as entry.target.dataset.id. If you are unfamiliar with the data attribute you can read more here about using it.

In the example below, we show multiple cards, but only the visible ones get rendered. The secret is in the wrapper which has v-intersection attached to it and a fixed height and width (which acts as a necessary filler when the inner content is not rendered – so that scrolling won’t erratically jump).

The example below can also be written by using QIntersection component which makes everything even easier.