Newly available Newly available. Verify your target environments before adopting.

checkVisibility()

The checkVisibility() method of the Element interface checks whether the element is potentially visible.

The method returns false in either of the following situations:

The element doesn't have an associated box, for example because the CSS display property is set to none or contents.

The element is not being rendered because the element or an ancestor element sets the content-visibility property to hidden.

The optional parameter enables additional checks to test for other interpretations of what "visible" means. For example, you can further check whether an element has an opacity of 0, if the value of the element visibility property makes it invisible, or if the element content-visibility property has a value of auto and its rendering is currently being skipped.

Note that a return value of true does not guarantee the element is visible to the user, just that it may be visible. Elements outside the viewport or occluded by other content may still return true.

DOM

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
checkVisibility
105
105
106
17.4
105
17.4
checkVisibility (options checkOpacity parameter)

`options.checkOpacity` parameter
105
105
106
17.4
105
17.4
checkVisibility (options checkVisibilityCSS parameter)

`options.checkVisibilityCSS` parameter
105
105
106
17.4
105
17.4
checkVisibility (options contentVisibilityAuto parameter)

`options.contentVisibilityAuto` parameter
121
121
122
17.4
121
17.4
checkVisibility (options opacityProperty parameter)

`options.opacityProperty` parameter
121
121
122
17.4
121
17.4
checkVisibility (options visibilityProperty parameter)

`options.visibilityProperty` parameter
121
121
122
17.4
121
17.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT 
checkVisibility(options)

Use cases

  • Using checkVisibility()

    The checkVisibility() method of the Element interface checks whether the element is potentially visible.

Cautions

  • May not be supported in older browsers.

Implementation notes

  • Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Related links