Laravel Livewire：阻止选择列表更新时自动滚动回顶部

问题根源 #

Livewire在组件状态更新（比如调用toggleSelectPermission方法后）会重新渲染组件DOM，若列表项没有稳定的唯一标识，DOM元素会被重新创建，导致滚动位置丢失；另外，Livewire默认的DOM更新机制可能触发容器的滚动重置。

解决方案 #

1. 为下拉列表项添加稳定的wire:key

确保每个权限列表项拥有唯一且固定的wire:key，让Livewire仅更新状态变化的元素，而非重新渲染整个列表，从根源避免滚动位置被重置。

示例代码：

<!-- permission-dropdown组件的列表区域 -->
<div class="permission-scroll-container">
    @foreach($permissions as $permission)
        <div wire:key="permission-{{ $permission->id }}"
             wire:click="toggleSelectPermission({{ $permission->id }})"
             class="permission-item">
            {{ $permission->name }}
        </div>
    @endforeach
</div>

这里用permission-{{ $permission->id }}作为唯一标识，保证每个列表项的DOM节点不会被随意重建，仅更新选中状态相关的样式或数据。

2. 手动保存并恢复滚动位置

若添加wire:key后问题仍存在，可通过Livewire的JavaScript生命周期钩子，在组件更新前保存滚动位置，更新后恢复。

在permission-dropdown组件视图中添加脚本：

<script>
document.addEventListener('livewire:init', () => {
    Livewire.hook('component.updating', (component) => {
        if (component.name === 'permission-dropdown') {
            const scrollBox = document.querySelector('.permission-scroll-container');
            if (scrollBox) {
                component.set('savedScrollTop', scrollBox.scrollTop);
            }
        }
    });

    Livewire.hook('component.updated', (component) => {
        if (component.name === 'permission-dropdown') {
            const scrollBox = document.querySelector('.permission-scroll-container');
            if (scrollBox && component.get('savedScrollTop') !== undefined) {
                scrollBox.scrollTop = component.get('savedScrollTop');
            }
        }
    });
});
</script>

同时在PermissionDropdown组件类中添加对应属性：

class PermissionDropdown extends Component
{
    public $savedScrollTop = 0;
    // ... 其他属性与方法

    public function toggleSelectPermission($permissionId)
    {
        // 你的权限分配逻辑代码
    }
}

3. 禁用Livewire全局自动滚动行为

Livewire默认会在组件更新后滚动到页面顶部，可通过在组件根元素添加wire:scroll.no禁用该行为：

<!-- permission-dropdown组件的根容器 -->
<div wire:scroll.no class="permission-dropdown-wrapper">
    <!-- 下拉列表内容 -->
</div>

验证建议 #

优先尝试第一种方案（添加wire:key），这是最符合Livewire开发规范的解决方式。若仍未解决，再结合第二种或第三种方案调整。

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