HTML element with dynamic content scrolls back to top after content update

Hey guys! I have an app that generates content for the landing pages.
It’s organized in the following way: on the left there is a section for content generation, and on the right there is a dynamic HTML element that uses the generated content to show the end results.

The HTML element is somewhat long (in terms of element height). Every time the content updates, the html element resets and scrolls back to the top . Which is slightly inconvenient for the end users. (They would like to stay at the same scroll position of the html element).

Is there any way to avoid this?
Open to any suggestions, even the most creative ones :slight_smile:

ezgif.com-gif-maker (5)

The html element is re-rendering.

The way to achieve this is likely by adding some code in the JavaScript in the element and in bubble.

This JavaScript would be communicating the scroll position inside the html element to the bubble app.

On next instance when you add an element, the scroll position will need to be communicated to the new html element that is rendered. And then JavaScript needed to scroll to the old position

The element will still refresh. So it’ll look glitchy unfortunately.

Interesting app btw.

Thanks
Zubair

1 Like

Thanks! Do you think there is also a way to manipulate the DOM of the bubble’s HTML element? I was considering using the DOM, but could figure out the exact technical way to do it.

Hmm. Interesting idea. Not sure to be honest.

The lines of NoCode are blurry and it’s becoming codey now