Scroll End Master Component Documentation

Overview

The Scroll End Master component is here to offer a bit more control over the On Scroll Ending event in your OutSystems applications. It aims to provide a reliable alternative to the default List Widget behavior.

Key Features

• Gentle Enhancement: Allows for a bit more precision in managing scroll endpoint events.

• Reliability Boost: Aims to contribute to a smoother user experience by addressing potential inaccuracies in default List Widget behavior.

Getting Started

1. Adding to Your Project:
   • Install Scroll End Master component from Forge to your enviroment.
   • Import the Scroll End Master component into your OutSystems module.
2. Setting Up:
   • Simply drag and drop the Scroll End Master widget onto your screen or block, but make sure it's below the elements you want to analyze.
   • Connect it to the scrollable area you want to monitor.
3. Setting Up:

   • Drag and drop the Scroll End Master widget onto your screen or block.

4. Input Configuration:

   • Target Element ID (Mandatory):

     • The ID of the element to analyze for scrolling position.

   • Scroll Element ID (Optional):

     • The ID of the specific scroll container element. If provided, the widget will listen to scroll events within this container. If not provided, the widget will use the default scroll container, which is a div with the class "screen-container".

   • Is Data Fetched (Mandatory):

     • A boolean indicating whether data is fetched dynamically. If set to true, the component will start analyzing.

   • Offset Pixels (Optional):

     • Adjusts the sensitivity for detecting the scroll end. A higher value may delay the detection, while a lower value may trigger it sooner.
5. Implementation:
   • Use the Scroll End Master's event handlers to add your custom logic when the scroll endpoint is reached.

Important Consideration

While we hope the Scroll End Master adds a helpful touch to your project, please be aware that you still need to create your logic for the On Scroll Ending Event when fetching your data if that's what you want to use it for.

Example 1:

This is a simple example where the code will analyze the "ListToAnalyze" everytime it scrolls down and will call the event when the bottom of the element reaches the bottom of the window.

Important Note: When not giving a value to ScrollElementId, the code will listen the scroll event on the main scroll container that container the class "screen-container", which is the container that holds all the information of the screen and has the scrollbar to navigate through the screen.

Example 2:

This is a more specific case where the code will analyze the "ListToAnalyze" by checking if the bottom part reaches or intersects with the bottom of the "ScrollContainer" that has the scroll feature. 

In this case, a scroll event listener will be added to that "ScrollContainer" instead of the container with the class "Screen-container".