scrollBehavior Glitches

[pi0]

Hi. We have various issues reported for scrollBehavior not behaving as desired. Maybe use-cases differ but almost all of them are related to the same known issue and we are aware and plan to help fixing it. Please don't make/reopen duplicated issues as there is enough info about the problem.It just makes the process harder. As of always contributions and PRs are appreciated to both vue-router and nuxt for possible fixes.

vue-router

• Handle scrollBehaviour with transitions (Handle scrollBehaviour with transitions vuejs/vue-router#1263)
• Another detail of scrollBehavior wrapped in transition(Another detail of scrollBehavior wrapped in transition vuejs/vue-router#1373)
• scrollBehavior doesn't work for initial route in Firefox (scrollBehavior doesn't work for initial route in Firefox vuejs/vue-router#1585)
• Need a way to set what scroll position is saved (Need a way to set what scroll position is saved vuejs/vue-router#1187)
• Navigating back should retain the scroll position. (Navigating back should retain the scroll position. vuejs/vue-router#1669)
• Support parent container for scroll behavior (Support parent container for scroll behavior vuejs/vue-router#1249)
• Calcurated scroll position is incorrect in some browser with animation (calculated scroll position is incorrect in some browser with animation vuejs/vue-router#1530)

Issues

• Strange behavior in Firefox browser when page transition (Strange behavior in Firefox browser when page transition. #1373)
• What causes a glitch when page transition in Firefox? (What cause a glitch when page transition in Firefox? #1002)
• Delayed scroll top possible? (Delayed scroll top possible? #1355)
• ScrollBehavior: Fires too early (scrollBehavior: Fires too early #1036)
• Navigating back should retain the scroll position. (Navigating back should retain the scroll position. #1182)

Reproductions

• https://github.com/krestaino/scroll-position-nuxt (@krestaino, Navigating back should retain the scroll position. #1182)
• http://jsfiddle.net/qw4hbgek (@posva, Handle scrollBehaviour with transitions vuejs/vue-router#1263)
• http://jsfiddle.net/xctnu8r3/2 (@nickforddesign , Another detail of scrollBehavior wrapped in transition vuejs/vue-router#1373)
• https://github.com/vuejs/vue-router/tree/dev/examples/scroll-behavior (@hworld, scrollBehavior doesn't work for initial route in Firefox vuejs/vue-router#1585)
• http://codepen.io/brad426/pen/pezRge (@brad426)

Misc

• https://nuxtjs.org/faq/css-flash

_{This bug report is available on Nuxt.js community (#c1219)}

[pi0]

UPDATE new Async Scrolling will be available with vue-router@2.8.0 (Thanks to @homerjam . vuejs/vue-router#1758)

[typewriter-software]

Excellent, does anyone have a good way to hook this up with the router transition object to detect when to scroll? Or should we be using a timeout like in the documentation's example.

[hackuun]

@pi0 is there's a hope that it will fix ScrollToTop page transitions?

[homerjam]

@typewriter-software check out updated example here vuejs/vue-router#1804 we still need a small modification to vue-router for this to work (I wish I had included this in my last PR!).

[atinux]

#1376

[hackuun]

Any changes? How to use this promise?

[homerjam]

@iamdubx still waiting for the PR referenced above to be released, then I can make an example. For now you should be able to get it to work by installing vue-router from github and using the afterLeave hook as in the example in the PR (the afterLeave hook goes in nuxt.config.js).

[hackuun]

@homerjam good to hear, that it's not only me concern this issue.
Meanwhile, I found this awesome project, and wonder, how it fix Scroll behavior? I can't find anything regarding this issue in source code - https://github.com/krestaino/nuepress
Any ideas how it was done?