[SOLVED] V3 scroll position lost after multiple navigation

Questions
1

I find that scroll position is lost after navigation to more than two different pages.

Is there a way to fix this? I am using stacked pages, and the flow is as follow:

  1. Start from /home/ and scroll
  2. Go to /page1/ : this.$f7.router.navigate("/page1/");
  3. Scroll on /page1/, go back home : this.$f7.router.back("/home/"); (/home/ scroll is restored successfully)
  4. Go back to /page1/ : this.$f7.router.navigate("/page1/"); (/page1/ scroll is restored successfully)
  5. Go to /home/ : this.$f7.router.back("/home/"); (/home/ scroll is restored successfully)
  6. Go to /page2/ : this.$f7.router.navigate("/page2/");
  7. Go to /home/ : this.$f7.router.back("/home/"); (/home/ scroll is restored successfully)
  8. Go back to /page1/ this.$f7.router.navigate("/page1/"); (/page1/ scroll has been reset!)

Why is the scroll of /page1/ reset in step 8 and how can I remedy this?

2

Because when page gone to stack (deeper than 3rd level in navigation) it became display: none so browser apparently resets its scroll position. I guess you use Vue or React, so you can save and restore page’s scroll in your component within pageBeforeOut (save scroll) and pageBeforeIn (restore scroll) events

1 Like
3

Really appreciate your help, saved me from insanity! All working nicely now. You guessed correctly - I am using Vue… Out of curiosity, do you think that router.scrollHistory should take care of these sorts of cases?

Anyway, for others who are stuck on this, here is the code I used to get it working (remember to create a savedScrollTop variable):

pageBeforeIn(e) {
	// restore scrollTop
	this.$$(e.currentTarget).find('.page-content').scrollTop(this.savedScrollTop);
},
pageBeforeOut(e) {
	// save scrollTop
	this.savedScrollTop = this.$$(e.currentTarget).find('.page-content').scrollTop(); 
},