Gx-intersection-observer NPM

gx-intersection-observer

This control allows the user to wrap another component and use the Javascript Intersection Observer API on it. The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

Children

The different building blocks of the card can be specified using a set of predefined slots:

Slot	Details
`content`	This slot will be rendered as content inside the intersection observer.

Example

<gx-intersection-observer>
  <div slot="content">
    Some information
  </div>
</gx-intersection-observer>

Properties

Property	Attribute	Description	Type	Default
cssClass	css-class	A CSS class to set for the`gx-intersection-observer`	string
root	root	Set the ID of the component that is used as the viewport, default is the browser.	string	null
topRootMargin	top-root-margin	Top margin around the root	string	"0px"
leftRootMargin	left-root-margin	Left margin around the root	string	"0px"
bottomRootMargin	bottom-root-margin	Bottom margin around the root	string	"0px"
rightRootMargin	right-root-margin	Right margin around the root	string	"0px"
intersectionRatio	intersection-ratio	The degree of intersection between the target element and its root, its a read-only property that change its value when the IntersectionUpdate event its triggered. Default value is zero.	number	0
threshold	threshold	Percentage values representation of the target element which are visible. Default value is 0	string	0