Preserving scrolling during page navigation is always an undesirable feature.

Question

I have a standard laravel inertia vue3 setup using breeze, and as the Inertia documentation says, navigation between pages should mimic browser default behavior, resetting when the page Scroll to top to load. But in my case that's not how it works.

I don't have preserveScroll: true in my link but this happens anyway.

I tried using the vuejs onMounted() hook to scroll to the top when the component loads, but the page immediately scrolls from the top of the previous page to the last scroll position. So I disabled this hook because the flickering effect was ugly.

Any idea how to solve this problem? Thanks in advance.

Answer 1

I think you have to define scroll regions: https://inertiajs.com/scroll -management#scroll-regions

Your app does not appear to use document body scrolling.

Answer 2

My CSS file has a property overscroll-behavior: contains; applied to the body tag. Since I removed it, everything works fine now.