googlearchive / core-animated-pages

Animated transitions between pages
https://www.polymer-project.org/docs/elements/core-elements.html#core-animated-pages
32 stars 34 forks source link

"slide-from-right" animation does reset scroll position #34

Open fabritw opened 9 years ago

fabritw commented 9 years ago

Hi, I am having a problem replicating "native" behaviour when transitioning between windows (this is mostly relevant to mobile displays with limited screen real-estate).

For example, I would like a "slide-from-right" animation to display the new page with a scroll position at the top of the page, regardless of what scroll position the preceding page had. At the same time I would like to show the previous page in its original scroll position when transitioning back. This seems to be how native apps behave in my experience, where scroll position of pages do not influence each other.

Currently when I am scrolled on the origin page, the same scroll position is shown on the transitioned page. When the new page does not require scrolling (as it is shorter than the preceding page), then a gap at the bottom of the page is shown, until the animation ends whereby it "jumps" into position at scrollTop.

I hope my explanation is clear. I am unsure if this is the intended behaviour and if there is any way to make it more "native"? As a workaround I am using the below hack, which resets the scroll position to top, but of course it is not a smooth transition and when navigating back the position is lost.

document.querySelector('#mainContainer').scroller.scrollTop = 0;

http://stackoverflow.com/questions/25146834/polymer-scrolling-issue

ninthspace commented 9 years ago

You could listen to the core-animated-pages-transition-prepare event then store the current scrollTop of the page. Upon returning to the page, perhaps on the core-animated-pages-transition-end event, you can then restore scrollTop. You'll still get the original scroll position shown briefly, however.