Inertia.js and scroll management of scrollable divs

[tomoehlrich]

I think I may misunderstand scroll management with Inertia.js and scrollable divs. Maybe somebody can point me in the right direction.

I started off without scrollable divs. And using "preserve-scroll" on links works fine and remembers the scroll position in the document body.

Then I switched to a new layout where the height is always 100% of the screen. And the logical columns of the application scroll automatically vertically. Slack-app style.

Clicking on Inertia links with preserve-scroll now does not restore the scroll position of the scrollable elements.

I tried a couple of things like using "scroll-region" but in the documentation it sounds as if scroll-region is not meant for preserving the scroll position but for resetting it.

This is a simplified example of my code (with Vue and Tailwind):

<template>
  <div class="flex h-screen overflow-hidden">
    <ul class="w-1/4 bg-teal-100 divide-y max-h-screen overflow-y-auto">
      <li v-for="(item, idx) in listItems" :key="idx" class="p-2">
        <Link href="/" class="block" preserve-scroll>{{ item }}</Link>
      </li>
    </ul>

    <div class="flex-1 bg-indigo-100 p-2 max-h-screen overflow-y-auto">
      <p class="mb-2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec
        interdum turpis. Curabitur et lectus mollis libero placerat hendrerit
        eget vel ipsum. Morbi eu diam id justo interdum condimentum a vel dolor.
        In hac habitasse platea dictumst. Etiam imperdiet dolor laoreet placerat
        laoreet. Nulla erat lacus, facilisis quis nulla in, dignissim lobortis
        augue. Cras viverra diam diam, et commodo augue rhoncus non. Vestibulum
        pretium luctus justo, at lobortis odio vestibulum sed. Nulla facilisi.
      </p>

      <!-- long content here -->
    </div>
  </div>
</template>

<script>
import { Link } from '@inertiajs/inertia-vue'

export default {
  components: {
    Link,
  },

  props: {
    user: Object,
  },

  computed: {
    listItems() {
      let items = [];
      for (let i = 0; i <= 50; i++) {
        items.push(`ListItem ${i}`);
      }

      return items;
    },
  },
};
</script>

I also tried to add "scroll-region" to the "ul" tag. Using "preserve-state" in the link kind of does the trick but I would like to only preserve the scroll positions of all the scrollable elements after any click.

Any tipps appreciated.

[JoaoHCopetti]

I had a similar issue and this is what I did:

export const preserveScroll = (selector) => {
  const scrollPos = document.querySelector(selector).scrollTop

  document.addEventListener(
    'inertia:navigate',
    () => {
      document.querySelector(selector).scrollTop = scrollPos
    },
    { once: true }
  )
}

I add a @click listener event for the <Link /> component of Inertia, then I call the function above, passing the selector, it should be the selector of the scrollable element.

The function will find the scroll position of the element before something happens, then re-define it to the previous position after inertia navigate event is dispatched.

Obs.: You can't store the element in a variable and reuse it inside the callback, or it won't work.

[Tarpsvo]

Modified version of @JoaoHCopetti's script that worked for my use case:

const preserveScroll = () => {
    if (!window.gpScrollRegions) window.gpScrollRegions = {};

    const scrollRegions = document.querySelectorAll('[scroll-region]');
    scrollRegions.forEach(region => {
        window.gpScrollRegions[region.getAttribute('scroll-region')] = region.scrollTop;
    });

    document.addEventListener(
        'inertia:finish',
        () => {
            setTimeout(() => {
                const scrollRegions = document.querySelectorAll('[scroll-region]');
                scrollRegions.forEach(region => {
                    region.scrollTop = window.gpScrollRegions[region.getAttribute('scroll-region')] ?? 0;
                });
            }, 0);
        },
        { once: true }
    );
};

Encountered multiple issues:

• inertia:navigate never fired
• wouldn't work without setTimeout()

Unsure what's the cause