StaticcreateCreates a new instance of ViewWatcher with the given ViewWatcherConfig. It does not save it for future reuse.
StaticreuseReturns an existing instance of ViewWatcher with the given ViewWatcherConfig, or creates a new one.
NOTE: It saves it for future reuse, so don't use this for temporary short-lived watchers.
ReadonlyfetchGet the current view relative to the target. By default, it will waitForMeasureTime and so will be delayed by one frame.
Optionalrealtime: booleanIf true, it will not waitForMeasureTime. Use this only when doing realtime scroll-based animations as it may cause a forced layout.
ReadonlynoRemoves a previously added handler for trackView.
LisnUsageError If the target is invalid.
ReadonlyoffRemoves a previously added handler.
LisnUsageError If the target is invalid.
ReadonlyonCall the given handler whenever the root's view relative to the target position changes, i.e. when the target enters or leaves the root.
Unless OnViewOptions.skipInitial is true, the handler is also called (almost) immediately with the current view if it matches this set of options*.
IMPORTANT: The same handler can not be added multiple times for the same target, even if the options differ. If the handler has already been added for this target, either using trackView or using onView, then it will be removed and re-added with the current options. So if previously it was also tracking position across root using trackView, it will no longer do so.
LisnUsageError If the target or the options are invalid.
ReadonlytrackThis does more than just onView. The difference is that in addition to a change of View, such as the target entering or leaving the ViewWatcher's root (by default the viewport), the handler is also called each time the target's relative view changes while inside the root.
A change of relative position happens when:
All of the above are accounted for. Internally it uses ScrollWatcher, DOMWatcher and SizeWatcher to keep track of all of this.
If the target is leaves the ViewWatcher's root, the handler will be called with the ViewData, and the above events will stop being tracked until the target enters the watcher's root again.
IMPORTANT: The same handler can not be added multiple times for the same target, even if the options differ. If the handler has already been added for this target, either using trackView or using onView, then it will be removed and re-added with the current options.
If handler is not given, then it defaults to an internal handler that
updates the following set of CSS variables on the target's style and
represent its relative position:
--lisn-js--r-top--lisn-js--r-bottom--lisn-js--r-left--lisn-js--r-right--lisn-js--r-width--lisn-js--r-height--lisn-js--r-h-middle--lisn-js--r-v-middleSee ViewData.relative for an explanation of each.
Note that only Element targets are supported here and not offsets.
LisnUsageError If the target or "views" are invalid.
ViewWatcher monitors the position of a given target relative to the given root or the viewport.
It's built on top of IntersectionObserver.
It manages registered callbacks globally and reuses IntersectionObservers for more efficient performance.