You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Story:
If I have a music app, the home page is a long list of songs that scrolls down 3-4 screens long. When clicking a song, it goes into the detail page of that song.
Scenario:
I scroll to the bottom of the home screen and click the last song to visit its detail page.
I click back to return to the home screen.
Expected behavior:
it visits the detail page at the top of the screen scrolling position. i.e. top: 0
it returns to the home screen list at the bottom of the screen. i.e. top: pageHeight - screenHeight
Current behavior:
it visits the detail page at the bottom of the screen. i.e. top: pageHeight - screenHeight <<< not expecting this, I should see the top of the song detail page
it returns to the home screen list at the bottom of the screen. i.e. top: pageHeight - screenHeight
Now, if at step 2., before I return to home page, I first scroll back to the top: 0 of the detail page screen, then hit the back button to return to home page, router will also scroll to the top of the screen at home page at top: 0, <<< also not expecting this, because I clicked the last song at the bottom of the page, I would expect to return to the bottom of the page
I would expect the router to remember the home screen position and scroll to the bottom at top: pageHeight - screenHeight
I have disabled this behavior by hardwiring the scrolling behavior to always get back to the top of the screen at top:0:
const router = createRouter({
history: createWebHistory(),
routes,
scrollBehavior() {
//e.g. when navigating from the bottom of a long list page to a detail page
//prevent route between pages from staying at the bottom
return { top: 0, left: 0 };
},
});
As you can see, this is not perfect. How do I get the wanted behavior, which is to let the router remember the correct page position when returning to the home page, and not go to the wrong position when visiting the detail page?
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Story:
If I have a music app, the home page is a long list of songs that scrolls down 3-4 screens long. When clicking a song, it goes into the detail page of that song.
Scenario:
Expected behavior:
top: 0
top: pageHeight - screenHeight
Current behavior:
top: pageHeight - screenHeight
<<< not expecting this, I should see the top of the song detail pagetop: pageHeight - screenHeight
Now, if at step 2., before I return to home page, I first scroll back to the
top: 0
of the detail page screen, then hit the back button to return to home page, router will also scroll to the top of the screen at home page attop: 0
, <<< also not expecting this, because I clicked the last song at the bottom of the page, I would expect to return to the bottom of the pageI would expect the router to remember the home screen position and scroll to the bottom at
top: pageHeight - screenHeight
I have disabled this behavior by hardwiring the scrolling behavior to always get back to the top of the screen at
top:0
:As you can see, this is not perfect. How do I get the wanted behavior, which is to let the router remember the correct page position when returning to the home page, and not go to the wrong position when visiting the detail page?
Beta Was this translation helpful? Give feedback.
All reactions