Scroll down page slowly on load

App Building
1

(posting again here as this forum seems more relevant)

Very simple, how do I set it up so my retool page slowly scrolls down automatically when loaded?

I've got this JS code that works on other websites:

var distanceToScroll = document.body.scrollHeight - window.innerHeight;
var speed = 2; 

var scrollInterval = setInterval(function() {
    window.scrollBy(0, speed);
    
    if (window.pageYOffset >= distanceToScroll) {
        clearInterval(scrollInterval);
    }
}, 16);

But I can't get my head around how exactly Retool works with components/global JS. I've tried making a query or using it as preloaded JS but I can't get it working. Tried calling it in different ways, going through the documentation etc.

I've got some imageGrids on my page, including imageGrid8 at the bottom of the page that could be used if a component needs to be referenced.

How would I set this Javascript up to work with Retool?

Thank you!

2

Hi @Billy_Gigurtsis

Thanks for reaching out! We have a scrollIntoView method included with most components - it works well in a JS query that triggers on page load with a page load delay.

I'd recommend trying a Javascript query with imageGrid8.scrollIntoView(). Then, go to the Advanced tab of the query to set it to trigger on page load with a 2000ms delay. See this external doc for the parameters that can be passed to scrollIntoView

3

Thank you so much for the help! I think I could make that work, but it's not really the perfect solution because it scrolls so fast (even with the 'smooth' option)

I'm trying to create a dashboard with a bunch of imageGrid's stacked on top of each other. I want to display this dashboard on a monitor, and slowly scroll down the page for people to look at it and read the data.

If there's no other solution i'm happy to try and craft something whereby each imagegrid is scrolled to, and then it restarts and scrolls back to the top... What do you think would be best?

Also, is there any documentation for what JS methods are included in retool? Thanks!

4

Hi @Billy_Gigurtsis,

I would chain Javascript queries on success of one another that scroll to the next image grid, on a delay. When you hit the last image grid, you can trigger another query to scroll up to the first one.

Each component doc has a list of methods that can be called on it: https://retool.com/components/image-grid

And global app methods are here: https://docs.retool.com/reference/apps/global/methods/utils

5

For slower scrolling, maybe you could use spacer components that have more frequency along the page but don't have any visual significance

A bit tedious to set up, unfortunately! But it seems to work well :blush: You can copy + paste or duplicate components & you can duplicate queries