Forum Academy Marketplace Showcase Pricing Features

WF Scroll to an element within a scrollable group

Hey everyone! I have a group which allows vertical scrolling when the content overflows, now I’m trying to add an action on a button to scroll to this element within this group.

I tried the “scroll to element” wf action, but it doesn’t work since this references full page height, has anyone been able to achieve this?

Best to all

There’s a seperate scroll action for repeating groups.

It’s not an RG, since the new responsive engine you can allow the element to fit the content or have a max screen height and allow it to scroll, that “group scroll” is what I’m trying to achieve.

Ah okay sorry I misunderstood. You would be better off running Javascript for this using the Toolbox plugin.

I myself have had issues with Bubble’s native scroll to action.

I’ll give it a try, but wanted to avoid using plugins for this… Thanks!!

As far as I know this is not possible, because the bubble “scroll to” and “scroll position” etc. only interacts with the scroll of the main page that’s loaded and not with any other scroll from an scrollable (Floating)group on that page.

I fixed it with javascript that linked to the id of the (Floating) group.

I have asked ChatGPT if he knows how, and I got a answer. I didn’t try it but maybe it works.

Question:

I have a question about bubble.io I have a group which allows vertical scrolling when the content overflows, now I’m trying to add an action on a button to scroll to this element within this group.

I tried the “scroll to element” workflow action, but it doesn’t work since this references full page height? Do you know how to achieve this?

Chatgpt answer:

To scroll to a specific element within a group that allows vertical scrolling, you can use the “Scroll to element” action in combination with the “Find element by ID” action. Here’s an example of how you can do this:

First, give the element that you want to scroll to a unique ID by setting the “ID” attribute of the element in the Element Properties panel.

Next, add a “Scroll to element” action to your workflow and select the group that allows vertical scrolling as the element to scroll.

Add a “Find element by ID” action before the “Scroll to element” action and set the ID of the element that you want to scroll to as the value for the “ID” input field. This will find the element that you want to scroll to within the group.

Connect the output of the “Find element by ID” action to the “Element” input field of the “Scroll to element” action. This will tell the “Scroll to element” action to scroll to the element that was found by the “Find element by ID” action.

Add a trigger for the workflow, such as a button click, to execute the actions.

This should allow you to scroll to a specific element within a group that allows vertical scrolling when the trigger is activated.

Hi @jos2 I got really excited with the ChatGPT answer, but now there is no “Find element by ID” in the native actions in bubble. Did a quick search in the forum and couldn’t find any plugins that provide this action. :frowning:

Thanks a ton!

I’m having the exact same problem right now. Even tried making it a reusable element and keeping the “scroll-to” workflow in there, but still no dice.

Did it work with JavaScript code? And if so, which code did you use?

Hi @wesfrank in the end I opted to create a hidden group under the scrollable group and show it upon clicking a button, It solved my problem but didn’t find a solution for the underlying issue.

also looking solution for the same problem, but didn’t find anything in forum or any plugin to solve this issue

Ran into the same problem.

Luckily I have an RG on the page, so my workaround is to use this RG as an anker and use the WF “scroll to entry of RG” to achieve the “scroll to element” result.

The distance b/t the 1st item of this RG and the real destination element I want the page to scroll is the offset number.

Workarounds are never ideal but hopefully this helps others who run into the same issue.