Best practice for resetting scroll position between pages?

[David Notik]

So even the Polymer website has this issue. This is an SPA-world problem.

Repro: Go to http://www.polymer-project.org/docs/elements/core-elements.html, click on e.g. core-ajax on the left and scroll down to the middle, then goto core-xhr. Note the scroll position.

What are some best practices considering that I a) want to avoid behavior like the above, but also b) want to preserve the scroll position for when I use the back arrow to goto a page I've already been? It'd be nice if core-pages had support built in.

I've opened an issue as well: https://github.com/Polymer/core-pages/issues/8

Originally brought up here: http://stackoverflow.com/questions/25046892/best-practice-for-resetting-scroll-position-between-pages

[Eric Bidelman]

I'm also interested in what techniques people use to deal with this.

We actually handle the scrolling position on the rest of the site like this. When the injected page is loaded, we scroll to the top (or to the anchor if there's a hash).

The fact that it doesn't behave the same in the element docs is a bug.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/c1a46da2-bd24-427f-8447-c4613cf457f1%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[to.ks...@gmail.com]

I'm currently running into this scroll position issue as well when using core-pages.  I noted the P2 label for this issue on https://github.com/Polymer/core-pages/issues/8 .  Sorry, but I'm not very familiar with GitHub labelling so am unsure as to it's current status.  I'm just looking for a way to reset the vertical scroll position to scrollTop when another page is selected.  Is there a way to easily accomplish this?

[David Notik]

I like the approach I ended up going with.

Every page, or view, has its own ViewModel (essentially an object that represents the state of that view). In that ViewModel, I store a lastScrollPos variable holding the last known scroll position. As I scroll, I save the new scroll position. When a view is attached, it checks to see if we have an existing ViewModel and, if so, it uses that its lastScrollPos. A new ViewModel uses the lastScrollPos default value of 0.

See it in action at http://woven.co.

Code:

https://github.com/woven/dart-communities/blob/master/lib/src/client/view_model/base.dart#L6

https://github.com/woven/dart-communities/blob/master/lib/src/client/components/inbox_list/inbox_list.dart#L305-L316

[to.ks...@gmail.com]

Fortunately for me, I am utilizing core-header-panel / core-scroll-header-panel, so simply adding the following line to the page selection event (or in my case 'on-open-page' custom event) did the trick:

this.$.appHeader.scroller.scrollTop = 0;

However, in this case I didn't need to get fancy by storing the last known scroll position as I only needed to ensure that the top of the newly selected page(s) were visible.  If I did require that additional functionality, then I probably would have ventured down the road you suggested.  Thanks!

[Anders Holmgren]

I'll borrow your trick although I really think this should be bake into core-pages