Hold scroll if not at top

I have a repeating group displaying db contents that are populated via an external source via API workflow. Data added updates in realtime (good). But what I need the app to do is PAUSE scrolling if the scroll bar is not at the top of the window.

For instance, if the user scrolls down in the repeating group to look at a piece of data, then new data is added while the user is reading, the data scrolls down a bit (to accommodate the new unseen data at the top), and it makes it hard for user to continue reading.

Suggestions for best way to fix?

Thanks!

@rover - welcome to Bubble and the forums!

Could you expand a bit on the type of information (ex is it a feed of posts from something like Twitter)?

It sounds like you have a good grasp on things, but to cover some basics first.

There are different types of repeating group formats, which you can use to control how much information is loaded and what the scrolling interaction is like.

For a quick description of the repeating group types (via the Bubble reference):

  • Vertical scrolling: The element adds cells as the user scrolls down, but it doesn’t push the elements below it. Instead, users keep scrolling.
  • Extendable vertical scrolling: The element adds cells as the user scrolls down, and it pushes the elements below down. This is like Facebook’s feed.
  • Full list: The element draws as many cells as needed. This is not the best approach when the list is long.
  • Fixed number of cells: Only shows a fixed number of entries. Use the show next/previous actions to navigate in the workflows.
    – Horizontal scrolling: The element add cells as the user scrolls right. In this mode, the repeating group can only have one row.

Beyond this, you can control the number of items retrieved by adding an “items until” constraint on the search. Then, if you want to add a sort of refresh action, you can have a new data call that displays data in the repeating group. (This could be triggered by pressing a button or potentially by a pull to refresh plugin’s action).


Dan (creator of LearnTo - 15+ hours of Bubble tutorials and live coaching)

Hi there,

Data is incoming SMS messages, so comparable to another dataset like fb or twitter.

I experimented with the various RG types, but none do exactly what I’d like.

For instance, vert scroll and ext vert scroll both exhibit the following behavior:

Let’s say a user has scrolled down to read an SMS. If a new SMS comes in while he’s reading, it pushes the one he was reading down one line.

I’d like the SMS being read to remain exactly where it is. New data can still be added, but you’d just have to scroll further to the top to get to the new data. When scrolled all the way to the top, incoming messages would of course push others down 1 line (so you always have latest at the top).

I’ll take a look at pull to refresh plugin, but not sure it would do what I want.

If there was a way to PAUSE incoming data when not scrolled to top, that would work as well (and essentially refresh when scrolled all the way back to top, then remain auto-refresh as long as it’s at top).

Thanks!

Got it, you can use the :make static function, which stops new items from being added to a list until you specifically update it with a new list of data. (Another case where you’d use something like the pull to refresh action).

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