Vuetensils

intersect

A Vue directive which adds an IntersectionObserveropen in new window to the element it's placed on. The observer watches for the element to enter and/or exit the parent (defaults to window), and fires a callback function on that event. The callback function is provided the IntersectionObsesrverEntryopen in new window and the element's DOM nodeopen in new window so you can view the status of the element and make changes as needed.

The directive also supports modifiers to fire only when the element enters, only when the element exits, or to only fire the handler once.

Check your JavaScript console and scroll around to see what's going on.

Note: This site adds styles for the .intersect-example class

Default Behavior

The default handler fires whenever the element enter or exits the context.

.enter modifier

Only fires when the element enters the context.

.exit modifier

Only fires when the element exits the context.

.once modifier

Only fires when the handler once. Can be chained to .enter or .exit.

Multiple Handlers

You can attach a handler for the onEnter, onExit, and onChange events.

IntersectionObserver Options

You could also specify the options for the IntersectionObserveropen in new window in the object you pass in. These include root, rootMargin, and threshold.

For example, if I wanted the entire element to be visible before considering it in, I could do:

Available properties

  • onChange: The callback invoked when intersection state changes.
  • onEnter: The callback invoked when element is intersecting with context.
  • onExit: The callback invoked when element is not intersecting with context.
  • threshold: A number between 0 and 1. For example, if it is 0.5 the function will be invoked when half of the element is visible in the root element.
  • root: The scrollable element query selector like '#some-id'. Must be an ancestor of the element with on which you use this directive.
  • rootMargin: The margin given to the root element. Same as CSS margin.

Available modifiers

  • change: Will take the passed function and assign it to onChange (default).
  • enter: Will take the passed function and assign it to onEnter.
  • exit: Will take the passed function and assign it to onExit.