How to use Scrolling Position
This plugin works with two tracker elements around the content you want to monitor.

Basic setup

1. Add one tracker before the content.
Set:
container_position = Top

2. Add your content below the Top tracker.

3. Add another tracker after the content.
Set:
container_position = Bottom

4. Use the same container_id on both trackers.

Example:
container_id = product_card_1

Recommended structure

Top tracker  
Your group / card / section  
Bottom tracker

Important

For best accuracy, use a unique container_id for each monitored block.

Good examples:
product_1  
card_25  
section_pricing  
post_123  

Avoid using the same container_id for many unrelated blocks unless you specifically want automatic nearest-pair detection.

States explained

is_visible  
Returns yes when any part of the monitored area is visible.

is_fully_visible  
Returns yes only when the monitored area is 100% visible.

visible_percentage  
Returns a number from 0 to 100.

0 = not visible  
1 to 99 = partially visible  
100 = fully visible

pair_is_ready  
Returns yes when the plugin successfully detects both Top and Bottom trackers for the same container_id.

current_scrolling  
Returns the current scroll direction:
up  
down  
idle

current_scrolling_position  
Returns a shared numeric scroll position inferred from tracker movement. All trackers publish the same page-level value.

Viewport calibration

Some Bubble Mobile layouts have safe areas, rounded containers, headers, or bottom bars. If the plugin marks content as fully visible too early or too late, adjust these fields:

viewport_top_margin  
viewport_bottom_margin  

These margins define the calibrated visible area used by visible_percentage.

You can also use:

fully_visible_top_margin  
fully_visible_bottom_margin  

These act as aliases for fine-tuning when visible_percentage reaches 100.

Color progress tip

A common setup is to change background color based on visible_percentage:

0 = hidden  
1-99 = partially visible  
100 = fully visible  

Example color scale:
10% red  
50% yellow  
100% green  

Notes

This plugin is made for Bubble Mobile native apps.

It does not access other Bubble elements directly.

It does not use DOM, document, window, jQuery, or HTML inside the mobile component.

If you need to monitor an element, place the Top and Bottom trackers around it.