scrollTo an specific element in new component

I have a customized list feature with select boxes on modal.

expected behavior -> scroll to the selected list option on modal open.
here is what i tried.
1.

const el = document.getElementById('elementToView');
window.scrollTo(el)
el.scrollIntoView({block: "end", inline: "nearest"});

neither of them worked.

is there any way to work around ?
Thank you.

Hey @j_ah – JS in Retool is sandboxed so you won't be able to use parent window functions. We used to have a .scrollIntoView() function for container components, but it looks like we've deprecated that. Let me see what I can dig up....

@justin similar question on my end - was wondering, if .scrollIntoView() was brought back into the fold?

We're reloading a single view when the user presses "next" in our application and would love to be able to reset the view so that the user gets to see the top of the page, upon the re-render.

Hi @schopra

Thanks for reaching out -- we are working through all components and adding .scrollIntoView() :blush: It's still in progress so I don't have a timeline, but I'll post here when it's shipped

Update scroll into view shipped here: https://updates.retool.com/en/january-20-2023-2

How is scrollIntoView supposed to work. I do not see any docs on it. For example if I use it on a table the table itself comes into view. Can it scroll a row into view?

Hi @zdrummond Great question. I'll see if we can get the docs updated! :pray:

scrollIntoView 

works at the component level. It cannot be used to scroll within the table component, but it can be used to scroll within the app to a particular table. You can also reference this external documentation in the meantime.

I've included an app export (at the bottom of this post) with an example for you to try. You'll notice that you can use scrollIntoView by typing out the component name that you want to scroll to and then adding .scrollIntoView(), along with any optional settings.

You can also use our GUI:

This all said, you can use our control component GUI to scroll to a specific row:

scrollintoview app (1).json (9.3 KB)

2 Likes