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".
  • Accepted string arguments: none
  • Accepted options:
    • offsetX: A number.
    • offsetY: 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, scroll the main scrolling element to element's position:

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

Example

When the user clicks the button, scroll the main scrolling element to element's position +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, scroll the main scrolling element to element's position 10px down and 50px left:

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

Example

When the user clicks the button, scroll the closest parent element with class scrollable to the element's position:

<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