$w.ViewportMixin

$w.ViewportMixin

Provides functionality for elements that can be scrolled into and out of view.

Contents

onViewportEnter( ) Adds an event handler that runs when an element is displayed in the viewable part of the current window.
onViewportLeave( ) Adds an event handler that runs when an element is no longer displayed in the viewable part of the current window.
onViewportEnter( )

onViewportEnter( )

Adds an event handler that runs when an element is displayed in the viewable part of the current window.

function onViewportEnter(handler: EventHandler): Element
callback EventHandler(event: Event, $w: Function): void

Description

An element enters the viewport when the page is scrolled to show any part of the element. An element also enters the viewport if it was hidden or collapsed and is then shown or expanded in the viewable part of the current window.

Parameters

handler function(event, $w) The name of the function or the function expression to run when the element enters the viewport.
event Event The event that occurred.
$w $w Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Element The element on which the event is now registered.

Examples

Get the ID of the element that has entered the viewport

JHcoIiNteUVsZW1lbnQiKS5vblZpZXdwb3J0RW50ZXIoIChldmVudCwgJHcpID0+IHsKICBsZXQgdGFyZ2V0SWQgPSBldmVudC50YXJnZXQuaWQ7IC8vICJteUVsZW1lbnQiCn0pOwo=
$w("#myElement").onViewportEnter( (event, $w) => {
  let targetId = event.target.id; // "myElement"
});

See Also

onViewportLeave( )

onViewportLeave( )

onViewportLeave( )

Adds an event handler that runs when an element is no longer displayed in the viewable part of the current window.

function onViewportLeave(handler: EventHandler): Element
callback EventHandler(event: Event, $w: Function): void

Description

An element leaves the viewport when the page is scrolled so that the elements is completely out of view. An element also leaves the viewport if it was shown or expanded and is then hidden or collapsed from the viewable part of the current window.

Parameters

handler function(event, $w) The name of the function or the function expression to run when the element leaves the viewport.
event Event The event that occurred.
$w $w Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Element The element on which the event is now registered.

Examples

Get the ID of the element that has entered the viewport

JHcoIiNteUVsZW1lbnQiKS5vblZpZXdwb3J0TGVhdmUoIChldmVudCwgJHcpID0+IHsKICBsZXQgdGFyZ2V0SWQgPSBldmVudC50YXJnZXQuaWQ7IC8vICJteUVsZW1lbnQiCn0pOwo=
$w("#myElement").onViewportLeave( (event, $w) => {
  let targetId = event.target.id; // "myElement"
});

See Also

ViewportMixin-onViewportEnter( )