The "Find Element Scroll Y By Id" plugin enables you to dynamically retrieve the vertical scroll position (Y-coordinate) of any HTML element on your page using its ID. Additionally, the plugin captures and calculates the current screen dimensions (width and height) in real-time. These functionalities are particularly useful for tracking the visibility of specific elements, triggering animations or actions when an element enters the viewport, or for any custom interaction based on an element's position and the screen size.
Simply provide the ID of the target element, and the plugin will return its scroll Y position relative to the top of the document and the screen dimensions. The plugin is easy to integrate into your workflows and can be used to enhance the interactivity and responsiveness of your web applications.
Retrieve the vertical scroll position (Y-coordinate) of any HTML element. Capture and calculate the screen dimensions (width and height) in real-time. Ideal for custom animations, actions, or tracking elements' positions. Simple and lightweight implementation. Compatible with dynamic elements and responsive designs.
Free
For everyone
stars • 0 ratings
22 installs
This plugin does not collect or track your personal data.
How to Use the "Find Element Scroll Y By Id" Plugin (Element Type):
Install the Plugin:
Add the "Find Element Scroll Y By Id" plugin to your Bubble application from the plugin marketplace. Add the Plugin Element to Your Page:
In the Bubble editor, drag and drop the plugin element (e.g., Find Element Scroll Y By Id) onto your page where you want to use it. Configure the Plugin Element:
Element ID: In the properties panel of the plugin element, input the ID of the HTML element whose scroll Y position you want to retrieve. This should be the exact id of the element on your page (IDs are case-sensitive). Trigger the Plugin Action:
Create a workflow that triggers when you need to retrieve the scroll Y position. For example, you might trigger it on page load, when a button is clicked, or when the element enters the viewport. Use a custom state or a workflow action to store the returned scroll Y position if needed. Use the Scroll Y Position:
The plugin will retrieve the Y-coordinate of the specified element and you can use this value in your workflows. This value can be used to scroll to the element, trigger animations, or perform other custom actions. Test Your Implementation:
Preview your page and trigger the workflow to ensure that the scroll Y position is correctly retrieved and used as intended.
Types
This plugin can be found under the following types:
Built on Bubble
