Livewire3：阻止wire:navigate默认滚顶行为，保留滚动位置

以下是几种可行的方案，实现保留当前窗口滚动位置的需求：

1. 全局生效的滚动位置保存与恢复 #

在项目的全局JavaScript文件（如resources/js/app.js）中添加事件监听，对所有使用wire:navigate的导航自动生效：

// 导航开始前，保存当前滚动位置到sessionStorage
window.addEventListener('livewire:navigating', () => {
  sessionStorage.setItem('scrollPosition', window.scrollY.toString());
});

// 导航完成后，恢复之前保存的滚动位置
window.addEventListener('livewire:navigated', () => {
  const savedScrollPos = sessionStorage.getItem('scrollPosition');
  if (savedScrollPos) {
    window.scrollTo(0, parseInt(savedScrollPos));
    sessionStorage.removeItem('scrollPosition');
  }
});

2. 针对特定链接的自定义处理 #

如果只需要对部分wire:navigate链接保留滚动位置，可以给目标链接添加自定义属性，再通过事件判断处理：

首先在HTML链接中添加标记：

<a href="/target-page" wire:navigate data-preserve-scroll>保留滚动位置跳转</a>

然后修改全局JS代码：

window.addEventListener('livewire:navigating', (event) => {
  // 仅当触发导航的元素带有data-preserve-scroll属性时，保存滚动位置
  if (event.detail.triggerElement?.hasAttribute('data-preserve-scroll')) {
    sessionStorage.setItem('scrollPosition', window.scrollY.toString());
  }
});

window.addEventListener('livewire:navigated', () => {
  const savedScrollPos = sessionStorage.getItem('scrollPosition');
  if (savedScrollPos) {
    window.scrollTo(0, parseInt(savedScrollPos));
    sessionStorage.removeItem('scrollPosition');
  }
});

3. 组件内局部处理 #

如果仅需在特定Livewire组件的导航中保留滚动位置，可以结合组件的浏览器事件实现：

在组件类中触发自定义事件：

public function navigateToPage()
{
    $this->dispatch('preserve-scroll')->toBrowser();
    return $this->redirect('/target-page', navigate: true);
}

在组件的Blade视图中添加事件监听：

<script>
document.addEventListener('livewire:initialized', () => {
  Livewire.on('preserve-scroll', () => {
    sessionStorage.setItem('scrollPosition', window.scrollY.toString());
  });
});

document.addEventListener('livewire:navigated', () => {
  const savedScrollPos = sessionStorage.getItem('scrollPosition');
  if (savedScrollPos) {
    window.scrollTo(0, parseInt(savedScrollPos));
    sessionStorage.removeItem('scrollPosition');
  }
});
</script>

所有方案的核心逻辑都是利用Livewire的livewire:navigating（导航开始）和livewire:navigated（导航完成）生命周期事件，在导航前后分别保存和恢复滚动位置。

内容的提问来源于stack exchange，提问作者stealz