We are excited to announce the launch of the Bubble plugin, Scrollspy!
This plugin implements scrollspy feature for Bubble. Works for RepeatingGroup or any other element type.
Use case examples:
- Dynamically highlight a nav element in the nav bar (check the demo for an example).
- Dynamically change selected element in a dropdown on scroll
- Dynamically highlight an item in TOC (Table of Content) on scroll
Demo:
Full Description, Documentation & Screenshots: https://digitaleye.bubbleapps.io/index/scrollspy
We hope you enjoy using this plugin to add Scrollspy feature to your Bubble apps. No matter where you are in the world, stay safe, stay creative, and stay connected to each other!
Plugin page:
17 Likes
This is a great plugin which is very useful and simple to use.
I played around with it the other day, and it works great but, unfortunately, it doesn’t work with horizontal scrolling repeating groups (it almost does, but not quite), which is what I was really needing it for.
Any chance this could be added at some point in the future? (it would be great to be able to get the index of the currently displayed item in a horizontal repeating group).
3 Likes
Aweslme plugin. I have a need for horizontal scroll too. Detect active cell on horizontal 1 column repeating group.
I’m excited to announce that Scrollspy now supports the horizontal RepeatingGroups! 
Check the demo: demo | editor
@adamhholmes @MarkusBoostedApp
4 Likes
This is fantastic, I’m playing around with it now…
Just one thing I’ve noticed…
For the vertical repeating group version there is an element action that lets you run a workflow when the RG’s item changes.
But there doesn’t seem to be a similar action for the horizontal scrolling version.
It would be great if there was an element action to run a workflow when the item in a horizontal RG changes as well (as there is for the vertical RG) - if it’s possible to add that at any point, that would open up some great possibilities.
1 Like
That’s a great suggestion! I will definitely add it into the next release!
2 Likes
hi!
I’m using the scrollspy for a horizontal repeating group and it works well but I’m facing an issue: I need the the data source of the repeating group to change according to the search criteria defined by the user and for this use case, the scrollspy doesn’t work when the new data source returns a lower number of cells than the precedent data source. Note: when the cells is equal or higher than the precedent, it works well.
How can I workaround this issue?
Thanks!
Hi @lutahara ,
Thanks for sharing this!
May I ask you to create and share us access to a test app where we can test the issue?
Hi @BubbleSam , thanks for your answer
I’ve created an app with a structure that replicates my problem but I couldn’t add the scrollspy plugin because I would need to pay for it again. Here is the app for testing/debug purposes. You should be able to edit it and add the plugin on your end:
so, the problem I’ve faced on my app is that, if you click on one of the buttons (city names) in the following order:
- new york (4 elements)
- paris (3 elements)
when you click in Paris, scrollspy won’t be able to follow (because it has fewer elements than the precedent)
on the other hand, if you click:
- paris
then
- new york
it works…
Please let me know your findings
Best
Lucia
1 Like
I just installed the plugin, but when I create a repeating group, the ID Attribute section is not shown at the bottom of the element properties like it says in the documentation. Was there a change?
Thanks
Hi @bridger.oneill !
Could you please check this page of our docs:
https://bubble.digital-bird.com/classify
It explains what you should do to enable this option.
Please don’t hesitate to contact us if you need further assistance 
@BubbleSam hi!
Friendly ping on the dysfunctioning related to the number of cells that are no longer tracked by scrollspy when the new number of elements (cells) is smaller than the precedent dataset.
I’ve created a testing page (details in the message above) but would need you to add the plugin as this is not the original app I’ve bought the plugin for (I’ve created this one for the purpose of this debugging).
Let me know if you need more infos.
Looking forward to hearing from you as I won’t be able to use the plugin and will need to review the whole look and feel of my app in case we don’t find a solution for this issue.
Thanks
Best
Lucia
Hi @lutahara !
Thank you for your patience! 
I’ve just recreated your example:
Demo | Editor
For me it looks like it works as expected. When the datasource is changed, the scrollspy plugin starts to track the new dataset.
Please correct me if I’m wrong
hi @BubbleSam
thanks for taking the time to have a look on my issue.
In your demo I can indeed see the plugin following the changes, but in my use case it still not working… It might be cause the very first dataset is already a subset of the whole database (in this example it could be all places in Paris, instead of all places everywhere), then when I click on Tokyo (less elements), the “bug” happens.
I’ve re-tested it on my side but still having the same misbehave.
I’ve recorded my screen to illustrate the problem and also took a screenshot of the database:
Alternatively, if you give me editing rights on your demo, we could work from there too.
Thanks
Best
Lucia
Hi @lutahara ,
I’m going to send you a link in DM so you can edit the demo as you wish. I changed the first dataset to a subset of the database, it’s still working
Scrollspy v2.1.0 is here!
This small release fixes an important bug in the “Scrollspy for Horizontal RG” element. Sometimes plugin was returning an incorrect index in the Closest mode.
Special thanks to @lutahara for pointing this out!
1 Like
awesome news!
Thanks a million!
It’s great to see how better the plugin is behaving. I totally recommend it to other users.
1 Like
We continue improving all our plugins. We’ve just updated the Scrollspy plugin. The 2.3.2 version has a better cross-browser compatibility and a few under-the-hood improvements. We’ve also updated the Demo and Documentation pages!
, feature requests 
and found bugs 
!