Inertia.js and scroll management of scrollable divs - css

Question

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 s 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.