Область прокрутки в Inertia

Давайте выясним, что такое область прокрутки в макете приложения. Шапка и боковое меню часто закреплены, а длинный текст идёт внутри колонки с overflow-y-auto. Документ body при этом почти не двигается, и автоматический сброс прокрутки страницы не затронет нужный блок.

Inertia умеет вести учёт таких элементов. Достаточно повесить на прокручиваемый контейнер атрибут scroll-region: при переходах клиент сбрасывает и восстанавливает прокрутку именно этой области, как для тела документа. Атрибут ставят на тот узел, где реально крутится контент.

Давайте соберём макет с фиксированной шапкой и внутренней лентой:

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

<template>
	<header>
		<Link href="/posts">Posts</Link>
		<Link href="/posts/about">About</Link>
	</header>
	<div class="overflow-y-auto" scroll-region>
		<slot />
	</div>
</template>

Давайте опишем две страницы и длинный список внутри макета:

<?php
	use Illuminate\Support\Facades\Route;
	use Inertia\Inertia;

	Route::get('/posts', function () {
		return Inertia::render('Posts/Index');
	});

	Route::get('/posts/about', function () {
		return Inertia::render('Posts/About');
	});
?>

Давайте выведем строки, которые крутятся в области макета:

<template>
	<h1>Posts</h1>
	<p v-for="n in 35" :key="n">
		Row {{ n }}
	</p>
</template>

Сделайте кабинет работника Mia с закреплённой шапкой и длинной лентой задач внутри прокручиваемой колонки, чтобы при смене вкладок крутилась только эта колонка.