Help with "scroll to" flow function

[Tinashe_Mukombe]

Perhaps I'm missing something but I can't get the "scroll to" flow function to scroll to the top of a page after a button press. Reference documentation for the function states that the page will be set to a selected Y-coordinate that is a distance in pixels from the top of the page. So when I set my Y-coordinate to 0, that should scroll the page to the top right? However nothing is happening 

For context, I have a social photography sharing app that deals with long lists with image components. It is not possible performance wise to load hundreds of these image posts at once therefore I wish to load only a few at a time. When the user gets to the bottom of a list, they tap a "load more" button and a new batch of posts is presented.

 In order to maintain app performance, the first batch of posts is discarded while the new batch is in view. However this new batch starts at the bottom of a list and I wish to start at the top hence the need for the "scroll to" function.  I also tried using recycler view,  but I was not able to get good performance so I opted to use page pagination instead with a scroll view. I get much better app performance this way with the added bonus of being able to add more than one container at a time within scroll view. Hopefully someone can shed some light here

App ID: 102109

Page: community wall

[Tinashe_Mukombe]

Perhaps I'm missing something but I can't get the "scroll to" flow function to scroll to the top of a page after a button press. Reference documentation for the function states that the page will be set to a selected Y-coordinate that is a distance in pixels from the top of the page. So when I set my Y-coordinate to 0, that should scroll the page to the top right? However nothing is happening 

For context, I have a social photography sharing app that deals with long lists with image components. It is not possible performance wise to load hundreds of these image posts at once therefore I wish to load only a few at a time. When the user gets to the bottom of a list, they tap a "load more" button and a new batch of posts is presented.

 In order to maintain app performance, the first batch of posts is discarded while the new batch is in view. However this new batch starts at the bottom of a list and I wish to start at the top hence the need for the "scroll to" function.  I also tried using recycler view,  but I was not able to get good performance so I opted to use page pagination instead with a scroll view. I get much better app performance this way with the added bonus of being able to add more than one container at a time within scroll view. Hopefully someone can shed some light here

App ID: 102109

Page: community wall

[mihaly-toth-nc]

Hey there, 

If I remember correctly you have a 'custom navigation', which also means that your page 'style' tab is being set to 'stretch to viewport height' and 'disable scrolling', right? 
If yes, then this is the cause. The 'scroll to' works only the page itself, not a scroll view. Which means that you have to choose between a bunch of tradeoffs here. 

There are a few tricks you could maybe try, but mostly all of them include the recycler view. 
The 'scroll recycler to offset' was working the last time I tried it, so let's assume it works now as well. 
While working with recycler views it is strongly adviseable to have this layout tree: 
- container (recycler external, set the height and width to 'grow to height' and width respectively)
- - recycler view
If you need to scroll (let's say a list of filters on top, then the layout would look like this: 
- scroll view
- - container for filters
- - container for recycler view
- - - recycler view
In this case make sure to set the recycler view height to: 'fit content'. Now this will provide decent performance, but will render all items inside the containers on load, so you cannot use the 'onEndReached' event. However, you can place a load more button to the last item of the repeat in the recycler, that would simulate your current implementation. 
Since recycler view's scroll to offset seems to be working, you can first replace the list of items, and then use the scroll to offset, set too 0, which would take you back to the top. 

I have not tested this approach for your specific use case, so it might require changes or adjustments, but we have managed to get pretty far with the recycler view. 

In terms of the limitation of the recycler to be able to only accept one single item, that's not a dealbreaker, as you can place a 'repeat item' container, which has the correct styling (padding, background etc) and then your main content inside of that repeat. Furthermore if you'd like to have a gridlike experience you can use a page variable of type: list of any values and feed your list into this where you 'group the items' into rows of 2 items and in the recycler you could repeat your list with the 'rows' and inside of that have another repeat for the items inside one row. In this setup you have to make sure to have a correct sizing sorted out (most probably going to be a regular grid, without dynamic height in items). 

Finally, another thought on the performance, where is the performance bottleneck coming from? Is it the size of the images (as these are taken most probably with professional cameras or high-end phones it can very well be). If that is the case, I'd suggest checking out cloudflare web workers with image transformation. They can offer an amazing performance boost by resizing your images on demand. (I've pulled that off for our application in a chat feature and it became lightning fast). Also if you work your way through this tutorial you can instruct the devices to cache the images for a specific timeframe (the image component can do it correctly in Build Apps, but it seems to have never been documented). 
Read more about my journey with this here: 
Dynamic image transformation on request + caching with cloudflare workers. 

Let me know if this is of help and if further clarification is required.