search

Dabolus / polymer3-webpack-starter-kit

Polymer 3 Starter Kit with Webpack
MIT License
55 stars 6 forks source link

Changing views should always scroll to top #58

Closed logicalphase closed 6 years ago

logicalphase commented 6 years ago

I noticed that when content for a view is added making it scrollable, switching to another view and then back again to first scrolled view returns to last scrolled position. I believe on any route location change the view should smoothly scroll back to the 0,0 position. I used to use Polymer.AppLayout.scroll to set the view position when any menu link, except anchor link, is clicked/tapped. But that helper has been changed in P3 prerelease versions. Any idea how to set that in TS, if you agree of course? 😁

Dabolus commented 6 years ago

Yep, maintaining the last scrolled position is the default behavior. Anyway, I think that many users might want the behavior you proposed, so I'm definitely going to take a look at how this behavior can be implemented in P3. Most probably, I'm going to add the "smooth scrolling to top" part of code as commented out, with a line that states "uncomment next code block to enable smooth scrolling to top when switching between pages". In this way, both type of users will be satisfied

logicalphase commented 6 years ago

Awesome. Thank you as always.

On Fri, Apr 13, 2018, 5:35 AM Giorgio Garasto notifications@github.com wrote:

Yep, maintaining the last scrolled position is the default behavior. Anyway, I think that many users might want the behavior you proposed, so I'm definitely going to take a look at how this behavior can be implemented in P3. Most probably, I'm going to add the "smooth scrolling to top" part of code as commented out, with a line that states "uncomment next code block to enable smooth scrolling to top when switching between pages". In this way, both type of users will be satisfied

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Dabolus/polymer3-webpack-starter-kit/issues/58#issuecomment-381096129, or mute the thread https://github.com/notifications/unsubscribe-auth/AYC27TpmbH1RFva-vfBKi9aUqZQP_1Wkks5toH91gaJpZM4TSq69 .

Dabolus commented 6 years ago

@hyperpress I was taking a look at this issue. I found the Polymer.AppLayout.scroll function you mentioned in P3, so I was wondering if you have some sort of best practice to suggest. I mean, where did you use to call that function? In the _pageChanged callback? Is there something else I should be aware of?

logicalphase commented 6 years ago

Hi Giorgio. I tried referencing the Polymer/news app on this. importing @Polymer/AppLayout/helpers/helpers and adding scroll({ top: 0, behavior: 'smooth' }); Adding that to the _routePageChanged block as a modified version of news-app.html. But no joy. It doesn't look like the function is firing to me. I'll ask over in Slack today when I get a moment and see if anyone over there knows anything. I'm stumped 😁

logicalphase commented 6 years ago

So, I checked with @westbrook over on the polymer slack channel and he offered a few suggestions, which I tried locally. But I'm still not getting what I want out of it. It's not a huge issue, but I'll check back if I come up with a solution.

logicalphase commented 6 years ago

This has been fixed in Polymer 3 and is an available import from PWA Helpers. Safe to close this issue.