Scrolling with icon instead of bar

Hello!

How can I scroll with an icon like this instead of a bar?
I would still like to be able to scroll with my mouse but also have the option to scroll by clicking the icon.


@boston85719
Thank you!

It’s easy enough to achieve, although it can seem a bit fiddly…

Here’s a very brief outline of what you’ll need to do (I’ve just implemented this myself on one of my apps)…

  1. Make sure you use a horizontal repeating group

  2. Use some custom CSS to hide the scroll bar (unless you want to keep the scroll bar visible).

  3. Use a custom state to set a scroll position for the repeating group, and some arrow icons to set the custom state value. Then use a ‘scroll to item’ action in a workflow to scroll to the desired RG item based on the custom state value. Use the ‘animate scroll’ option if you want it to be animated.

That’s the basic overview and it works perfectly, aside from one complication…

That is, there’s no synchronisation between the custom state value and the actual scroll position of the repeating group…

That means if a user uses the mouse or a touch screen to scroll instead of, or as well as, the arrows, it will mess up the scrolling (which may, or may not, be an issue for you).

If you want to overcome that problem I recommend using the ScrollSpy plugin, that will enable you to get the scroll position at any time so, using a workflow, you can set the custom state value to match the actual scroll position.

That way, whether a user scrolls with the mouse, touch screen, or the arrows, it will always be correct.

As I said, it seems a bit fiddly, but it’s simple enough to do. If you need more help just let me know.

2 Likes

Thank you so much!! That is so helpful! :slight_smile:

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