“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.
Not all browsers support the Intersection Observer API. Most modern browsers do, but other browsers do not. If you need to support older browsers, you can install and import (into a boot file) the official W3C polyfill.
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 */,
// any options from "Intersection observer options"
// on https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
root: null, // DOM Element
When using the Object form, only the
handler key is mandatory.
The handler Function takes one parameter, which is an IntersectionObserverEntry.
Scroll within the examples below until the observed element is in view. Then scroll it out of view.
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.
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 the
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 more easy.
In the example above we used a Quasar transition. For a full list, please head to Transitions page.