Сохранение прокрутки в Livewire

Давайте теперь докрутим длинный список постов. Человек докручивает вниз, жмёт кнопку там, а после ответа страница подбрасывает наверх, и место чтения теряется.

Модификатор .preserve-scroll просит Livewire сохранить положение прокрутки после запроса. Счётчик или список обновляются, а окно остаётся на том же месте.

Страница откроется по адресу /posts/long. Давайте опишем компонент PostLong:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class PostLong extends Component
	{
		public $count = 0;
		
		public function add()
		{
			$this->count++;
		}
		
		public function render()
		{
			return view('livewire.post-long');
		}
	}
?>

Давайте выведем длинный текст, кнопку внизу с сохранением прокрутки и счётчик:

<div>
	<p>Line</p>
	<p>Line</p>
	<p>Line</p>
	<p>Line</p>
	<p>Line</p>
	<p>Line</p>
	<button wire:click.preserve-scroll="add">
		Add
	</button>
	<div>{{ $count }}</div>
</div>

Давайте откроем страницу по адресу /posts/long:

<?php
	Route::get('/posts/long', function () {
		return view('posts-long');
	});
?>

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

<x-layout>
	<livewire:post-long />
</x-layout>

Создайте компонент EmployeeLong. После нажатия внизу списка страница не прыгает наверх.