React中点击返回列表按钮无法恢复滚动位置问题求助

核心原因 #

你调用setAllRestaurants恢复原列表后立刻执行window.scrollTo，但React的状态更新是异步的——此时原列表还没完成DOM渲染，滚动容器的高度还没恢复到之前的状态，导致滚动位置设置无法生效。

修复方案 #

方案1：监听列表状态变化，DOM更新后再滚动 #

拆分逻辑，用额外的useEffect监听列表状态，确保DOM完成渲染后再执行滚动操作：

useEffect(() => {
    if (props.specialOfferRestaurant) {
        localStorage.setItem('scrollPosition', String(window.scrollY))
        localStorage.setItem('restaurants', JSON.stringify(allRestaurants));
        window.scrollTo(0, 0)
        setAllRestaurants([props.specialOfferRestaurant])
    } else if (!props.specialOfferRestaurant && localStorage.length > 0) {
        setAllRestaurants(JSON.parse(localStorage.getItem('restaurants')))
    }
}, [props.specialOfferRestaurant])

// 监听列表恢复完成，执行滚动
useEffect(() => {
    if (!props.specialOfferRestaurant && localStorage.getItem('scrollPosition')) {
        const scrollPos = Number(localStorage.getItem('scrollPosition'))
        window.scrollTo(0, scrollPos)
        localStorage.clear();
    }
}, [allRestaurants, props.specialOfferRestaurant])

方案2：用requestAnimationFrame延迟滚动 #

如果不想新增useEffect，可以借助requestAnimationFrame让滚动操作等待DOM更新完成后执行：

useEffect(() => {
    if (props.specialOfferRestaurant) {
        localStorage.setItem('scrollPosition', String(window.scrollY))
        localStorage.setItem('restaurants', JSON.stringify(allRestaurants));
        window.scrollTo(0, 0)
        setAllRestaurants([props.specialOfferRestaurant])
    } else if (!props.specialOfferRestaurant && localStorage.length > 0) {
        setAllRestaurants(JSON.parse(localStorage.getItem('restaurants')))
        // 延迟到下一次浏览器渲染周期执行滚动
        requestAnimationFrame(() => {
            window.scrollTo(0, Number(localStorage.getItem('scrollPosition')))
            localStorage.clear();
        })
    }
}, [props.specialOfferRestaurant])

额外注意事项 #

• 如果你的列表是在自定义滚动容器内（而非window），需要将window.scrollTo替换为对应容器的scrollTop设置，比如document.getElementById('your-scroll-container').scrollTop = scrollPos。
• 可以添加边界判断，确保滚动位置不超过容器内容的总高度，避免无效滚动。

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