Overview

The "Infinite Scroll for Fast Scrolling Mice" component provides an easy way to implement infinite scrolling in your OutSystems applications. This component listens for when a user scrolls to the bottom of a scrollable container (like a list, table, or div) and triggers a custom event, allowing you to load more records dynamically.

This component is particularly optimized for users with frictionless scroll wheels and high-DPI mice, ensuring the scroll event is triggered even when users scroll quickly or smoothly. The component includes a placeholder for the content (table, list, etc.), so you can use it in any container where you want infinite scrolling functionality.

General Instructions for Using the Infinite Scroll Component

Step 1: Add the Component to Your Screen or Web Block

1. Download and Import the Component:

   • Go to the OutSystems Forge and search for Infinite Scroll for Fast Scrolling Mice.
   • Download the component and import it into your OutSystems environment.

2. Drag and Drop the Widget:

   • Go to the screen or web block where you want to implement infinite scrolling.
   • Drag the Infinite Scroll widget from the toolbox and drop it onto your screen or web block.

Step 2: Place Your Scrollable Content Inside the Widget's Placeholder

1. Find the Placeholder:

   • The Infinite Scroll widget includes a placeholder where your scrollable content will go. This is the area that the component will monitor for scrolling.

2. Add Your Content:

   • Simply place the list, table, or any other scrollable content inside this placeholder. The component will automatically detect the scroll events and trigger the corresponding action when the user reaches the bottom.

Step 3: The Component Handles the Scroll Behavior Automatically

1. No Additional Setup Needed:

   • Once you've placed your content inside the widget's placeholder, the infinite scroll behavior will work automatically. There is no need to modify the JavaScript or adjust any settings.
   • The component will listen for the user scrolling to the bottom of the container.

2. Automatic Event Trigger:

   • When the user scrolls to the bottom of the container, the component will automatically trigger the client action that you have set up to load more records or perform any other necessary action.

Step 4: Set Up the Action to Handle the Data Load (Optional)

1. Define the Client Action:

   • The component will trigger a client action when the user reaches the bottom of the scrollable container. The default action is named OnScrollEnd, but you can customize this name if necessary.

2. Handle Data Loading:

   • The client action can handle the logic for loading additional data (such as fetching more records from the database, calling an API, or dynamically adding rows to your list or table).

Step 5: Testing the Infinite Scroll

1. Scroll to the Bottom: As you scroll through the content inside the placeholder, the infinite scroll will be triggered once you reach the bottom of the scrollable area.
2. Verify Data Loading: The client action should be triggered to load additional data or perform any custom logic that you've set up.

Troubleshooting

• Event Not Triggering: Ensure that your container has a fixed height or max-height applied so that it is scrollable. Without this, the scroll event won't be detected.
• Multiple Triggers: If the event is being triggered too frequently, check that the component is properly handling the loading state and not firing events while data is still loading.

Conclusion

This Infinite Scroll component simplifies the implementation of infinite scrolling in your OutSystems applications. By simply placing your scrollable content (list, table, or any custom widgets) inside the widget's placeholder, the component automatically handles the scroll detection and event triggering.

There is no need to change any JavaScript or configure complex settings – just place your content, and the infinite scroll behavior will be up and running.