Vertical scroll is broken with CoreUI and InertiaJs

Question

I have a backoffice coded using Laravel, Vue and InertiaJs. We're using CoreUI as our template engine. On some pages, especially forms, when navigating back to an index page (listing), the vertical scroll is broken and does not work anymore.

For example, in the image below, the listing is fetched asynchronously. After importing contacts and being redirected to the page, I can no longer scroll down and need to refresh the page to make it work.

One thing I've notice is that it happens when using <Link> (from @inertiajs/vue3). If I use a regular a tag link, it works fine.

I've tried playing with the different scroll- function of InertiaJs (like prevent-scroll and scroll-region) but either I did it wrong, either it is not working.

I suspect the issue lies in the layout I'm using (scrollable content with header and sidebar from CoreUI) and the use of <Link>. Does anyone already had a similar issue ? Thanks for your help

Answer 1

I had something similar to this happening, I wanted to use Bootstrap modals but the scroll kept happening on the body and not the modal itself, and none of the scroll- functions worked, my fix was I had to add document.body.classList.add("modal-open"); and document.body.classList.remove("modal-open");