onViewportEnter( )
Adds an event handler that runs when an element is displayed in the viewable part of the current window.
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. onViewportEnter()
is not fired for hidden or collapsed
elements even if they are scrolled into view.
You can also define an event handler using the Properties and Events panel.
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 onViewportEnter(handler: EventHandler): Elementhandler: function EventHandler(event: Event, $w: $w): void
onViewportEnter Parameters
NAME
TYPE
DESCRIPTION
The name of the function or the function expression to run when the element enters the viewport.
EventHandler Parameters
NAME
TYPE
DESCRIPTION
Returns
This function does not return anything.
Return Type:
Related Content:
Was this helpful?
Get the ID of the element that has entered the viewport
Code Example
1$w("#myElement").onViewportEnter( (event) => {2 let targetId = event.target.id; // "myElement"3});