A Vue directive which adds an IntersectionObserver 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 IntersectionObsesrverEntry and the element's DOM node 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.
Note: This site adds styles for the .intersect-example class
The default handler fires whenever the element enter or exits the context.
Only fires when the element enters the context.
Only fires when the element exits the context.
Only fires when the handler once. Can be chained to
You can attach a handler for the
You could also specify the options for the IntersectionObserver in the object you pass in. These include
For example, if I wanted the entire element to be visible before considering it in, I could do:
- 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.
- change: Will take the passed function and assign it to
- enter: Will take the passed function and assign it to
- exit: Will take the passed function and assign it to