css - Inertia preserve scroll and scroll-region not working properly - Stack Overflow

admin管理员组

文章数量:1278793

So i have simple page with sidebar and main content area. I'm not sure what i'm doing wrong but for some reason inner content of sidebar is not preserving its own state and scroll position. Scroll position on a full page is preserved but scroll position on sidebar is always resetting to 0 whenever i click any inertia Link.

I followed official documentation from inertia but Its not working for me... What I'm doing wrong?

<script setup>
import { ref } from 'vue';
import { Link } from '@inertiajs/vue3';

const links = ref([
  { name: 'Home', url: '/home' },
  { name: 'Dashboard', url: '/dashboard' },
  { name: 'Profile', url: '/profile' },
  { name: 'Settings', url: '/settings' },
  { name: 'Reports', url: '/reports' },
  { name: 'Invoices', url: '/invoices' },
  { name: 'Products', url: '/products' },
]);

defineProps({
  title: String,
});
</script>

<template>
  <div class="bg-gray-100 h-[2500px] flex">
    <!-- Sidebar with scroll-region -->
    <div class="w-64 bg-gray-800 text-white p-4 space-y-2 overflow-y-scroll h-screen" scroll-region>
      <h2 class="text-lg font-bold mb-4">Navigation</h2>
      <nav>
        <ul class="space-y-20">
          <li v-for="(link, index) in links" :key="index">
            <Link
              :href="link.url"
              class="block px-4 py-2 rounded hover:bg-gray-700"
              preserve-scroll
              preserve-state
            >
              {{ link.name }}
            </Link>
          </li>
        </ul>
      </nav>
    </div>

    <!-- Main Content -->
    <main class="flex flex-col p-4 flex-1 h-full">
      <slot />
    </main>
  </div>
</template>

So i have simple page with sidebar and main content area. I'm not sure what i'm doing wrong but for some reason inner content of sidebar is not preserving its own state and scroll position. Scroll position on a full page is preserved but scroll position on sidebar is always resetting to 0 whenever i click any inertia Link.

I followed official documentation from inertia but Its not working for me... What I'm doing wrong?

<script setup>
import { ref } from 'vue';
import { Link } from '@inertiajs/vue3';

const links = ref([
  { name: 'Home', url: '/home' },
  { name: 'Dashboard', url: '/dashboard' },
  { name: 'Profile', url: '/profile' },
  { name: 'Settings', url: '/settings' },
  { name: 'Reports', url: '/reports' },
  { name: 'Invoices', url: '/invoices' },
  { name: 'Products', url: '/products' },
]);

defineProps({
  title: String,
});
</script>

<template>
  <div class="bg-gray-100 h-[2500px] flex">
    <!-- Sidebar with scroll-region -->
    <div class="w-64 bg-gray-800 text-white p-4 space-y-2 overflow-y-scroll h-screen" scroll-region>
      <h2 class="text-lg font-bold mb-4">Navigation</h2>
      <nav>
        <ul class="space-y-20">
          <li v-for="(link, index) in links" :key="index">
            <Link
              :href="link.url"
              class="block px-4 py-2 rounded hover:bg-gray-700"
              preserve-scroll
              preserve-state
            >
              {{ link.name }}
            </Link>
          </li>
        </ul>
      </nav>
    </div>

    <!-- Main Content -->
    <main class="flex flex-col p-4 flex-1 h-full">
      <slot />
    </main>
  </div>
</template>

• css
• vue.js
• vuejs3
• inertiajs
• inertial-navigation

Share Improve this question Follow edited Feb 24 at 8:17 kissu 46.8k1616 gold badges9090 silver badges189189 bronze badges asked Feb 24 at 2:52 Aleksandar ĐokićAleksandar Đokić 2,3512020 silver badges3939 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

Try using named route in the href attribute in the Inertiajs <Link> component for your sidebar navigation.

in your routes definition,

<?php

// in the web.php file

Route::get('/dashboard', fn() => Inertia::render('Dashboard'))->name('dashboard')->breadcrumb('Dashboard');
// more routes ...

in your component,

<script setup>
import { ref } from 'vue';
import { Link } from '@inertiajs/vue3';

const links = ref([
  { title: 'Home', name: 'home' },
  { title: 'Dashboard', name: 'dashboard' },
  { title: 'Profile', name: 'profile' },
  { title: 'Settings', name: 'settings' },
  { title: 'Reports', name: 'reports' },
  { title: 'Invoices', name: 'invoices' },
  { title: 'Products', name: 'products' },
]);
</script>

<template>
  <div class="bg-gray-100 h-[2500px] flex">
    <!-- Sidebar with scroll-region -->
    <div class="w-64 bg-gray-800 text-white p-4 space-y-2 overflow-y-scroll h-screen" scroll-region>
      <h2 class="text-lg font-bold mb-4">Navigation</h2>
      <nav>
        <ul class="space-y-20">
          <li v-for="(link, index) in links" :key="index + link.name">
            <Link :href="route(link.name)" class="block px-4 py-2 rounded hover:bg-gray-700" preserve-scroll
              preserve-state>
            {{ link.title }}
            </Link>
          </li>
        </ul>
      </nav>
    </div>

    <!-- Main Content -->
    <main class="flex flex-col p-4 flex-1 h-full">
      <slot />
    </main>
  </div>
</template>

Solution is to use Inertia persistent layouts. Working like a charm

inertiajs/pages, inertiajs/pages#persistent-layouts

本文标签： cssInertia preserve scroll and scrollregion not working properlyStack Overflow