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 thegx-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] |

Built with StencilJS