Scroll to a specific item inside a List View

[Gerard_Lao]

Hi everyone

I’m new to Retool and I’m currently trying to figure out how to scroll to a specific item inside a List View using a button. I’m a bit stuck and would really appreciate some guidance.

My goal

I’d like to have a button that, when clicked, automatically scrolls the page down to the 10th item of a List View component.

My setup

• ListView component (listView2)

  • It contains a single Text component (textitem) that repeats for each element in the data source.

  • The ListView data source looks like this:

    • [
        { "index": 0, "text": "Some text for first item ..." },
        { "index": 1, "text": "Some text for second item ..." },
        ...
      ]
      

  • Each textitem simply displays {{ item.text }}.

    • 

• Button component (button5)

  • I want this button to scroll directly to item #10.

Here’s an overview of my setup:

What I’ve tried

I understand that I have to create an Click event handler for the button.

1. Using “Scroll to index” :

   • This option exists under “Control Component → Scroll to index”.

   • It scrolls inside the ListView (the inner list area), not the window view itself.

   • But I’d like the whole window to scroll down until that item becomes visible on screen.

2. Using “Scroll into view” :

   • This works for regular components like buttons or text elements but ListView items can’t be selected individually.

   • It seems that repeated items inside a ListView aren’t accessible as standalone components (probably due to optimization).

   • I was hoping to do something like listView2.instances[10].scrollIntoView() but that doesn’t seem possible.

I’m wondering if there’s a reliable way to scroll the window until a given item (e.g. index 10) is visible, or a supported workaround (anchor, querySelector, key, etc.) to target a specific item inside a ListView.

Thanks a lot in advance for your time

Here are additional screenshot about the ListView's settings :

[AJVancattenburch]

Hey @Gerard_Lao!

Did {{ listView2.scrollToIndex(10) }} not work? Also, if I'm not mistaken, isn't the correct syntax for .scrollIntoView() {{ listView2.scrollIntoView(10) }}?

Sorry, I'm on my mobile phone or else I'd have tried to test your example and have more of a thorough response.

[Darren]

Let us know if you've had a chance to test out the above recommendations, @Gerard_Lao! And welcome to the community.

To add a bit more detail, you might need a combination of the two approaches - listView.scrollIntoView() to scroll the whole screen and listView.scrollToIndex(10) to scroll through the nested elements.