✅ Link to the plugin page: https://zeroqode.com/plugin/scroll-actions-scroll-position-plugin-for-bubble-1728509765735x457151946141179900
Demo to preview the plugin:
Live Demo: https://scrollactionsdemo.bubbleapps.io/
Introduction
This plugin allows you to seamlessly manage and track the scroll behavior of a (repeating) group on your page. With this plugin, you can:
- Retrieve the Current Scroll Position: Get the precise scroll position of a (repeating) group in pixels, both horizontally (
left) and vertically (top).
- Retrieve the Maximum Scroll Value: Access the maximum scrollable value for both horizontal and vertical directions, helping you understand the group’s scrollable limits.
- Scroll to Specific Positions: Programmatically scroll to a specified pixel position horizontally (
left) or vertically (top).
How to setup
- Place the 'Scroll Actions' Element on Your Page
- Set the Target Group or Repeating Group
- In the element properties, enter the ID of the group or repeating group you want to use the plugin on.
- 🚨 Important: Ensure the target group or repeating group is scrollable and visible on page load(e.g., it shows a scrollbar).
- For example, if you have a repeating group with "Fit height to content = yes," it will not be scrollable, and the 'Scroll Actions' plugin will not function.
Note: To assign an ID to an element, enable the option in Bubble App - under Settings → General → Expose the option to add an ID attribute to HTML elements.
- Retrieve Scroll Positions
- The plugin provides the current scroll position (
LeftandTop) and the maximum scrollable values as element states. - When the group is at its initial position, the scroll values will be
Left: 0andTop: 0.
Plugin Element “Scroll Actions”
Fields:
Title | Description | Type |
ID | The ID of the scrollable group or repeating group that you want this plugin to track. This ID must match the HTML ID of the element on your page.
The target element must be scrollable (e.g., show a scrollbar) for the plugin to function properly.
To assign an ID to an element, enable the option under Settings → General → Expose the option to add an ID attribute to HTML elements in your Bubble app settings. | Text |
Element Actions
Scroll To Pixel Amount
This action allows you to programmatically scroll in the specified group or repeating group to a specific position, both vertically and horizontally.
Title | Description | Type |
Element ID | The ID of the group or repeating group you want to scroll in. The target element must be scrollable | Text |
Top px | The vertical scroll position to move to, in pixels.
Example: Setting to 100 will scroll the element 100 pixels down from the top. | Number |
Left px | The horizontal scroll position to move to, in pixels.
Example: Setting to 50 will scroll the element 50 pixels to the right. | Number |
Re-Initialize
This action is used to reinitialize the plugin’s core functionality. It resets the scroll tracking and recalculates the scroll positions and limits for the specified element.
When triggered, this action reinitializes the plugin by re-selecting the target element (based on the
ID plugin element property) and recalculating both the current scroll position and the maximum scrollable values (horizontal and vertical). It ensures that the scroll positions are updated and refreshed. 
Exposed states
Name | Description | Type |
Left Scrolling Position | The current horizontal scroll position of the target element, measured in pixels. A value of 0 indicates the element is scrolled to the far left. | Number |
Top Scrolling Position | The current vertical scroll position of the target element, measured in pixels. A value of 0 indicates the element is scrolled to the very top. | Number |
Max Top Scrolling Position | The maximum vertical scrollable distance of the target element, measured in pixels. This represents how far down the element can be scrolled. | Number |
Max Left Scrolling Position | The maximum horizontal scrollable distance of the target element, measured in pixels. This represents how far right the element can be scrolled. | Number |
Changelogs
Update 10.10.24 - Version 1.3.0
- Acquired by Zeroqode.
Update 06.03.24 - Version 1.2.2
- Description update.
Update 20.11.23 - Version 1.2.1
- Patch.
Update 11.01.23 - Version 1.2.0
- Improvements.
Update 28.12.21 - Version 1.1.0
- Added the 're-initialize' workflow action.
Update 12.10.21 - Version 1.0.1
- Minor improvements.
Update 12.10.21 - Version 1.0.0
- Launch.
Update 12.10.21 - Version 0.0.4
- Fix a bug for the 'Max top scrolling position'.
Update 12.10.21 - Version 0.0.3
- Minor improvements.
Update 12.10.21 - Version 0.0.2
- Improvements.
Update 10.10.21 - Version 0.0.1
- Private launch.