---

When to use it?

Utilizing this event is an excellent strategy for loading specific content at just the right moment—when a particular element comes into view. This functionality greatly simplifies the implementation of infinite scrolling, seamlessly integrating the dynamic addition of content as users scroll through a page, all while maintaining optimal performance.

Moreover, this approach enhances the ability to dynamically introduce content, advertisements, or interactive widgets based on user interaction,efficiently managing resources and tailoring content delivery to align with user preferences and actions.

How To use it?

This setup includes several options that configure how the observation behaves. Understanding the root, rootMargin, and threshold options is crucial for effectively leveraging this observer mechanism.

The root option in an Intersection Observer defines the viewport for visibility checks; when set to null, the browser’s viewport is used. For visibility within a specific container, that container should be specified as the root. The rootMargin option, mirroring CSS margin syntax, allows for adjusting the visibility area with margins defined in pixels or percentages, with a default of 0px, affecting when the visibility check triggers.

The threshold option sets the visibility percentage required to trigger the callback, ranging from 0 to 1. A threshold of 0.01 means the callback triggers when just 1% of the target is visible, suitable for early detections, while a threshold of 1.0 requires full visibility. Multiple thresholds can be specified as an array, enabling the callback to trigger at various visibility levels, facilitating granular control over visibility-triggered actions.

bstf.observer({
    options: {
        root:null,
        rootMargin: '0px',
        threshold: 0.5
    },
    element:document.getElementById('target'),
    callback: () =>{
        console.log('callback executed target observer!');
    }
})

In the given scenario, the objective is to initiate the loading of a stylesheet upon reaching an element identified by the class observed-element.

bstf.observer({
    options: {
        root:null,
        rootMargin: '0px',
        threshold: 0.01
    },
    element:document.querySelector('.observed-element'),
    callback: async () =>{
       await bstf.loadStyle({ 
            inlineStyle: `
                body{color:green;background:grey;transition:all 0.6s ease-in-out;}
            `, 
            appendTo: document.getElementById('embed-form')
        });
    }
})

Configuration options

• debug Boolean This boolean flag, when set to true, activates console logging for debugging purposes.

• options: object This is an object containing several sub-options that configure the behavior of the observer

  • root: HTML Element | null- *null by default * Specifies the DOM element that acts as the viewport for checking the target element’s visibility. If set to null or not provided, the browser’s viewport is used as the default observation area. This is useful for scenarios where observation needs to occur within a specific scrollable area rather than the entire document.
  • rootMargin: string - 0px by default - Expects a value similar to the CSS margin property (e.g., “10px 20px 30px 40px” for top, right, bottom, and left margins, respectively). This property extends or contracts the visibility area around the root, using units like px or %, enabling events to trigger just before the target becomes visible or starts to exit the visibility area.
  • threshold: number - 0.01 px by default - Determines the percentage of the target’s visibility that triggers the callback, ranging from 0 to 1. A value of 0.01 means the callback triggers when as little as 1% of the target is visible, suitable for detecting initial appearances, while a value of 1.0 requires the entire element to be visible. An array can specify multiple thresholds, allowing the callback to trigger at various visibility levels.

• element: HTML Element - document.querySelector('.js--observer-boostify') by default - The element property is crucial for the observer’s functionality, as it specifies the target DOM element that the observer will monitor for visibility changes. The example uses document.querySelector(‘.observed-element’) to select the element.

• callback: Function This function is executed whenever the observed element’s visibility crosses one of the specified thresholds in the observer’s options.

Utilities

Additionally, there’s a public ‘destroy’ method available, which requires specifying the observer you wish to remove:

bstf.destroyobserver({element:document.querySelector('.observed-element')})

If you need to refresh the observer, it will delete the existing event listener and establish a new one.

bstf.refreshObserverEvents({element: document.querySelector('.observed-element')});

Real World Examples