Tip to make scrolling of an RG set to "Vertical scrolling" smooth

Tips
1

Hey Bubblers,

this is a quick one, but still I think it’s worth sharing.

When you want the scroll to be smooth on an RG that is set to “Vertical scrolling” then here is a short video of how my solution compares to “native” Bubble:

Here is a preview:

And here is the setup:

ScrollSmoothly
ScrollSmoothly726×1256 66.4 KB

Code to copy:

var rg = document.getElementById('rg')

rg.style.maxHeight = '600px'

rg.style.overflowY = 'auto'

Note: Of course you have to set the 600px to the desired size of your RG.

You get the run javascript action from the Toolbox plugin: Toolbox Plugin | Bubble

Expose the id attribute of elements in your app editor under:
Settings > General > Checkmark for ID attributes under “General appearance”

Checkmark
Checkmark3294×56 10.2 KB

And set the id attribute of your RG to e.g. “rg”.

Finally, set your RG to “Full List” instead of “Vertical scrolling”.

All in all this will preserve the “Vertical scrolling” behaviour of the RG while scrolling way smoother than what is sometimes achievable with the native Bubble solution.

Hope this helps someone out.

Happy Bubbling. :slight_smile:

10 Likes
2

Great !

3

It works and looks good. But there is one problem. Now I have an empty space at the bottom of the page, which is approximately equal to the length of the full list.

Do you know how to fix this?

4

@mszaxaroff can you share a public link to your editor so I can take a quick look at it?

5

Unfortunately, I can’t give a link to my application, but it seems to me that your demo version has the same problem. If you scroll down the page, there is a lot of empty space that needs to be hidden somehow. My groups have a check mark “Collapse this element’s height when hidden”, but this does not solve the problem. I will be grateful for your help!
Запись экрана 2021-07-13 в 13.02.09

6

Hi @mszaxaroff ,
you could try setting the page height/max-height dynamically if this is an issue.
Lmk your progress so others can find it.

7

I did it via Ext. vertical scrolling, without code

8

Alrighty the native solution is probably better for you if you just display a feed.
Happy Bubbling

1 Like
9

Thank you for your support! :+1:

1 Like