Livewire3にアップグレードすると、ページネーションのクリック後のスクロール動作を指定できる

Livewire3でそのままページャーを実装するとTOPにスクロールされてしまう

前回記事でも書いたが、Livewire3にアップグレードする際は色々と落とし穴が多いので、しっかりアップグレードガイドを読んでおいた方がいい。

今回遭遇したのは、ページネーションのボタンをクリックするとページTOPにスクロールされてしまう現象。これは、実際のページネーションのテンプレートを見ると一目瞭然。

@php
if (! isset($scrollTo)) {
    $scrollTo = 'body';
}

$scrollIntoViewJsSnippet = ($scrollTo !== false)
    ? <<<JS
       (\$el.closest('{$scrollTo}') || document.querySelector('{$scrollTo}')).scrollIntoView()
    JS
    : '';
@endphp

対応は至ってシンプル。これだけ！

{{ $items->links(data: ['scrollTo' => false]) }}

もし逆にページ番号押下時に別の位置にスクロールさせたい場合は、以下のようにセレクタを指定すればよし！

{{ $items->links(data: ['scrollTo' => '#main']) }}

以上、またLivewire３で気づきがあれば投稿するかも。