web-api-intersection-observer
Reactive icon

Web API Intersection Observer

Stable version 1.0.0 (Compatible with OutSystems 11)
Uploaded
 on 08 August 2024
 by 
0.0
 (0 ratings)
web-api-intersection-observer

Web API Intersection Observer

Documentation
1.0.0

This component is based in the Intersection Observer Web API, documented in Intersection Observer API - Web APIs | MDN (mozilla.org). Reference that documentation for further details and specificities of the API.


Observer:

  • Common usage
  1. Place the Observer block anywhere in your screen, ensuring the widgets it references in the RootElementWidgetId and TargetElementWidgetId input parameters are already created in that screen.
    If RootElementWidgetId is not provided, the root element of the webpage is used.
    1. If you want multiple targets to be observed relative to the same target:
      1. [PREFERRED] Use the Observer_Observe global action after the observer has been created to add more target elements.
      2. Create multiple Observer blocks.
  2. Everytime the browser notices a change in the intersection of the root and target elements, a OnObserved event is triggered.
    The event provides a list of entries of the target(s) it observes and the current status of those target element(s) relative to the root element defined.
  • Stop observing
  1. If you want to stop observing a specific target, call the Observer_Unobserve to identify the target you want to stop observing.
  2. If you want to entirely stop observing all targets:
    1. Call Observer_Disconnect global action.
    2. Destroy the Observer block (e.g., using an IF widget to destroy the block).


Patterns

  • Lazy load
  1. Place the LazyLoad pattern anywhere in the page and place the content to load only when the page reaches that content within the Content placeholder.
  2. When the user reaches that element in the page, the content is automatically created in the page.