It looks like Vuejs is automatically scrolling to the top of a page when you push the back button, which is weird because by default the window doesnt even scroll to the top when you change route in a SPA or go to a new page. You need to explicitly set scrollBehaviour to scroll to the top. So how can we prevent the page automatically scrolling to the top when you press the back button.
beforeRouteLeave (to, from, next) {
alert('Are you sure you want to leave this page and lose unsaved changes')
// Notice how the page automatically scrolls to the top here even if the user were to response 'No' in a dialog situation
}
Heres a code pen of the problem
https://codepen.io/anon/pen/bOGqVP
Browser back button scroll to top is defined by browser. Aparently we can disable that behaviour by adding this line of code
window.history.scrollRestoration = "manual"
Adding this code will tell browser that we handle the scroll.
I only test this in your codepen. Need testing in other browser
Related
I am facing a weird issue in Chrome only: If I scroll the page, then click on an item in DocSidebar, the page navigates to a new URL but does not scroll to the top, but on click of second time it does. Any idea about the bad scroll state of the page? Thanks
I would like my app to keep the same scrolling position when navigating back to one of my routes. It is working if I navigate back using the back button of my browser but when I click on a link (created with nuxt-link) the scroll position resets to 0 when navigating to my route.
I tried replacing the scrollBehavior function in nuxt.config.js with my own. The function is called but the savedPosition parameter is null so it's obviously the reason why the scroll position is reset. Again, if I use the back button of my browser instead of clicking a link from an other route, then there is no problem, the savedPosition parameter is set to its expected value and the scrolling happens. I don't understand why it doesn't work when navigating with a link and what I can do to solve this. Any help would be appreciated.
I believe the reason this is happening is that nuxt-link is pushing a new page onto the back stack.
With that in mind, scrollBehaviour is being called with a null savedPosition parameter because this is a brand new page. This is analogous to calling router.push() when doing programmatic navigation.
I wasn't able to find any method of emulating the back button behaviour strictly using nuxt-link, but it's simple to implement using programmatic navigation:
// go backward one page
router.go(-1)
I have a react native app with a WebView. I have implemented navigation in the webview such as going back to previous screen using goBack() function of the webview. But the problem is I want the back icon disabled when the user reaches the home page in the webview.
Initially canGoBack prop is false on webview home page but after few navigations and coming back to home page doesn't set canGoBack to false.Hence back button is still enabled but othing happens when clicked.
Interestingly onNavigationStateChange also doesn't get triggered when going back. It only fires when clicking on links or navigating to other pages in the webview. Anyone has any solution as to how to disable custom back button on home page?
onNavigationStateChange changes canGoBack function only if you are visiting another domain. the state doesn't changes if you are browsing on the same domain
I'm using Vuetify's toolbar scrolling techniques feature on a SPA that needs to scroll to the top of a container between each page transition. When I trigger this via javascript using scrollTop, the scroll works fine, but it doesn't seem to let Vuetify know that a scroll up has occurred and as a result the primary toolbar is missing. If a particular page isn't long enough to require a scroll, it becomes impossible to regain the primary toolbar.
Any suggestions on how I can scroll the user to the top of the container from javascript AND have Vuetify move the primary toolbar back into place would be much appreciated.
<v-toolbar :scroll-off-screen="true" :scroll-target="'#scrolling-techniques'">
https://codepen.io/developerplus/pen/mBbjBq
I've attached a codepen link demonstrating the issue. Once scrolled down to the bottom of the container, if the "Scroll to Top" button is clicked, i'd expect it to both take me to the top of the container, and reveal the primary menu.
I found a solution to my question. If you refer to the codepen in the question, you'll notice the example is now working. What was required was the following:
let event = new CustomEvent('scroll')
container.pageYOffset = 0
setTimeout(() => {
container.scrollTop = 0
})
container.dispatchEvent(event)
Is there any way to prevent the default back button behavior in the navigation bar of a navigationview?
I'm trying to use Sencha Touch 2 history and linking abilities with routers, but that requires me to essentially intercept all button taps so that I can update the url.
The back button in a navigation bar creates all kinds of nightmares as far as thats concerned, and I can supply code if someone thinks they have an alternate solution, but preventing the default back button behavior seems best (so as to play nice with browser back button)
If you want to handle back button you can use back event of navigation view which fired when the back button of the navigation view was tapped.. Refer to my previous answer on how to do it.
If you want to completely hide the back button just simply use:
Ext.select('.x-button-back').hide();
try this Ext.getCmp('navigationview's id').getNavigatorBar().hide()