Class TrackView

This is a simple wrapper around the ViewWatcher. If you are using the JavaScript API, you should use the ViewWatcher directly. The purpose of this widget is to expose the watcher's ability to track an element's position across the viewport (or a given root element) and set relevant CSS properties via the HTML API. See ViewWatcher.trackView.

To use with auto-widgets (HTML API) (see settings.autoWidgets), the following CSS classes or data attributes are recognized:

  • lisn-track-view class or data-lisn-track-view attribute set on the element that constitutes the widget.

See below examples for what values you can use set for the data attributes in order to modify the configuration of the automatically created widget.

Note that the root margin value can either be comma-separated or space-separated.

Example

This will track the element across the viewport and set the relevant CSS properties.

<div class="lisn-track-view"></div>

Example

As above but with custom settings.

<div id="myRoot"></div>
<div data-lisn-track-view="root=#myRoot
                           | root-margin=100px,50px
                           | threshold=0,0.5
                           | debounce-window=0
                           | resize-threshold=0
                           | scroll-threshold=0"
></div>

Hierarchy (View Summary)

Methods

get register

Constructors

constructor

Properties

destroy disable enable getElement isDestroyed isDisabled onDestroy onDisable onEnable toggleEnable

Methods

Staticget

Staticregister

Constructors

constructor

Properties

Readonlydestroy

destroy: () => Promise<void>

Undoes all modifications to the element and returns it to its original state.

You will need to recreate it if you want to enable its functionality again.

Readonlydisable

disable: () => Promise<void>

Disables the functionality of the widget. What this means is specific to each widget.

Readonlyenable

enable: () => Promise<void>

Re-enables the functionality of the widget. What this means is specific to each widget.

ReadonlygetElement

getElement: () => Element

Returns the element passed to the widget constructor.

ReadonlyisDestroyed

isDestroyed: () => boolean

Returns true if the widget is destroyed.

ReadonlyisDisabled

isDisabled: () => boolean

Returns true if the widget is currently disabled.

ReadonlyonDestroy

onDestroy: (handler: WidgetHandler) => void

The given handler will be called when the widget is destroyed.

ReadonlyonDisable

onDisable: (handler: WidgetHandler) => void

The given handler will be called when the widget is disabled.

ReadonlyonEnable

onEnable: (handler: WidgetHandler) => void

The given handler will be called when the widget is enabled.

ReadonlytoggleEnable

toggleEnable: () => Promise<void>

Re-enables the widget if disabled, otherwise disables it.

Settings

Member Visibility

On This Page

Methods
Constructors
Properties