Detect when last row of Repeating Group is visible

Need help
1

How can I detect when the last row of a repeating group is visible?

I’m not looking to scroll to the bottom, but rather to detect when the user has scrolled to the bottom. I’d like to change some visual styling when the end has been reached, but I can’t find any condition relating to the last row being visible.

Thanks.

2

When Current cell’s Index is Repeating Group’s List of X:count

or

When Current cell’s Thing is Repeatin Group’s List of Things:last item

3

Thanks for the reply. Those work, of course, and I have many conditions like those already.

Please let me explain more thoroughly:

How can I detect from outside of the repeating group that the last row is visible, so that I can style other elements on the page or show/hide a popup, etc. that are not part of the repeating group?

I hope that clarifies my question.

4

There’s no vanilla Bubble functionality for this, but one way you can do it is by using the Intersection Observer API to detect when a given element comes into view (i.e. when the target element intersects with the parent element, some other element, or the viewport).

Here’s an example:

Last RG Item Visible (bubbleapps.io)

5 Likes
5

Fantastic! This is really good. Thank you.

Unfortunately, it hits on one of my pet peeves about Bubble. It runs from a workflow and I can’t set element properties (such as color) from a workflow.

I suppose I can use it to set a state and then use that state to trigger the style changes. I’ll work on it.

Thanks so much!

6

Yeah, you can set a custom state and use that as the basis for your conditions…

But, actually, you don’t even need to to do that… you can just give the JavaScript to Bubble element a value, and use that as the basis for your conditions.

I’ve updated the example, so it no longer uses a workflow… it just uses a condition based on the JavaScript To Bubble element’s value.

1 Like
7

Oh, that’s fantastic! I didn’t know I could do that.

Are you going to leave this example live for a little while? I’ll want to refer to it again.

THANK YOU!

1 Like
8

Sure… I’ll leave that example up.

2 Likes
9

This topic was automatically closed after 70 days. New replies are no longer allowed.