Search.../

onViewportLeave( )

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

Description

An element leaves the viewport when the page is scrolled so that the element 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. onViewportLeave() is not fired for hidden or collapsed elements even if they are scrolled out of view.

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector for working with elements in repeater items, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

Syntax

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

onViewportLeave Parameters

NAME
TYPE
DESCRIPTION
handler

EventHandler

The name of the function or the function expression to run when the element leaves the viewport.

Returns

The element on which the event is now registered.

Return Type:

EventHandler Parameters

NAME
TYPE
DESCRIPTION
event

Event

The event that occurred.

$w

$w

Deprecated: A selector function. The $w function was used to enable event handlers to work with elements in repeaters. Now, to get a scoped selector for working with repeater items, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context).

Returns

This function does not return anything.

Return Type:

void
Mixed in from:$w.FormElement

Related Content:

Was this helpful?

Get the ID of the element that has left the viewport

Code Example

Copy Code
1$w("#myElement").onViewportLeave( (event) => {
2 let targetId = event.target.id; // "myElement"
3});