Class ScrollTo

Scrolls to the given element or to the previous scroll position.

To use with auto-widgets (HTML API) as part of a trigger specification:

  • Action name: "scroll-to".
  • Arguments: none
  • Options (see ScrollToConfig):
    • offsetX: A number.
    • offsetY: A number.
    • duration: A number.
    • scrollable: A string element specification for an element (see getReferenceElement). Note that, unless it's a DOM ID, the specification is parsed relative to the element being acted on and not the element the trigger is defined on (in case you've used the act-on trigger option).

NOTE: Do not place a + sign in front of the offset values (just omit it if you want a positive offset). Otherwise it will be interpreted as a trigger option.

Example

When the user clicks the button (click target), scroll the main scrolling element to position of the element (on which the trigger is defined):

<button id="btn">Scroll to/back</button>
<div data-lisn-on-click="@scroll-to +target=#btn"></div>

Example

When the user clicks the button (click target), scroll the main scrolling element to position of the element (on which the trigger is defined) +10px down:

<button id="btn">Scroll to/back</button>
<div data-lisn-on-click="@scroll-to: offsetY=10 +target=#btn"></div>

Example

When the user clicks the button (click target), scroll the main scrolling element to position of the element (on which the trigger is defined) plus 10px down and 50px left, with a duration of 200ms:

<button id="btn">Scroll to/back</button>
<div data-lisn-on-click="@scroll-to: offsetY=10, offsetX=-50, duration=200 +target=#btn"></div>

Example

When the user clicks the button (click target), scroll the closest parent element with class scrollable to the position of the element (on which the trigger is defined):

<button id="btn">Scroll to/back</button>
<div class="scrollable">
  <div data-lisn-on-click="@scroll-to: scrollable=this.scrollable +target=#btn"></div>
</div>

Example

As above, but using data-lisn-ref attribute instead of class selector.

<button id="btn">Scroll to/back</button>
<div data-lisn-ref="scrollable">
  <div data-lisn-on-click="@scroll-to: scrollable=this-scrollable +target=#btn"></div>
</div>

Implements

Methods

register

Constructors

constructor

Properties

do toggle undo

Methods

Staticregister

Constructors

constructor

Properties

Readonlydo

do: () => Promise<void>

Scrolls the main scrolling element to the element's position.

Readonlytoggle

toggle: () => Promise<void>

Scrolls the main scrolling element to the element's position, if it's not already there, or otherwise scrolls the main scrolling element to the previous saved scroll position.

Readonlyundo

undo: () => Promise<void>

Scrolls the main scrolling element to the last scroll position before the action was done. If the action had never been done, does nothing.

Settings

Member Visibility

On This Page

Methods
Constructors
Properties