There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.
Close

Processing...
This may take a few seconds.

if-visible

Syntax

if-visible: [selector] [scope(selector)];

This conditional action will return true if the selector is at least partially visible on the screen.

Note: This only works in the vertical plane - it does not take into account left and right edges. If you need a horizonal option, start an issue on GitHub and the feature will get added.

selector = The selector you want to check. This can be any valid CSS selector that will return one result. If more than one result is gotten from the selector, the first one will be chosen. If left empty, like :if-visible() or if-visible: "";, then it will check the event selector.

scope = The container element that holds the boundaries of the element to check. If this is not specifed, the container will be the document itself.

For example, this will return true if the element #myDiv is at least partially visible on the screen.

@conditional myDivOnScreen {
    if-visible: #myDiv;
}

When used on an event selector with no element in parentheses, it will default to checking "self". Eg. #myDiv:if-visible: ...

Note: To check if an element is fully visible on the screen, see the "if-completely-visible" conditional action.

if-visible