Vue列表更新时iOS与Android滚动行为差异排查及统一方案

测试代码场景 #

数据源与计算属性 #

// arr1 是一个长数组
const arr1 = ref<any[]>([])
for (let i = 0; i < 100; i++) {
    arr1.value.push({
        name: i,
        key: `key-${i}`,
    })
}

// arr2 是基于 arr1 切片的计算属性，实现分页效果
const arr2 = computed(() => {
    return arr1.value.slice(start.value, start.value + 10)
})

触发按钮 #

<view class="test-btn" @click="test">Test</view>

<script setup>
const test = () => {
    start.value = 1
}
</script>

列表渲染 #

<view v-for="item in arr2" :key="item.key" class="item">
    {{ item }}
</view>

复现场景 #

场景1 #

1. 滚动列表，使arr2[0]元素部分隐藏
2. 点击Test按钮切换start值

• Android设备：新列表的arr2[1]（原arr1[1]）位于页面顶部
• iOS设备：新列表的arr2[1]（原arr1[1]）滚动到原arr2[0]（原arr1[0]）的位置

场景2 #

1. 滚动列表，使大量列表项被隐藏到视口外
2. 点击Test按钮切换start值

• Android设备：页面滚动位置无变化
• iOS设备：列表自动滚动到新的位置

核心问题 #

该滚动行为的跨端差异成因是什么？如何实现iOS与Android两端滚动行为一致？

差异成因 #

本质是两端WebView的滚动锚定机制不同：

• iOS的WKWebView会基于key对应的DOM元素进行位置锚定：当列表更新时，WebView会尝试保留原有DOM元素的相对位置。点击按钮后，原arr2[0]（key-key0）被移除，原arr2[1]（key-key1）成为新列表的第一项，WKWebView会将这个元素定位到原key-key0的位置，导致滚动位置“跟随元素移动”。
• Android的Chromium内核WebView基于滚动偏移量锚定：更新列表后，WebView会保持当前的滚动像素偏移不变。由于原滚动位置对应的新列表元素是key-key1，所以它会停留在视口顶部，滚动偏移量没有变化。

统一滚动行为的解决方案 #

可以根据需求选择以下方案：

方案1：禁用iOS的滚动锚定特性 #

通过CSS禁用WebKit的滚动锚定，强制两端都基于滚动偏移量保持位置：

html {
    overflow-anchor: none;
}

这个方案最简单，直接让iOS端和Android端保持一致的滚动偏移锚定逻辑。

方案2：手动控制滚动位置 #

在更新start值后，手动将滚动容器滚动到指定位置（比如顶部）：

const test = () => {
    start.value = 1
    // 若为自定义滚动容器，替换为对应DOM元素的scrollTop赋值
    uni.pageScrollTo({
        scrollTop: 0,
        duration: 0
    })
}

适合需要强制滚动到固定位置的场景。

方案3：基于元素位置调整滚动 #

如果需要保持原有可见元素的位置，可以在更新后找到目标元素，计算偏移量并调整滚动：

const test = async () => {
    start.value = 1
    // 等待DOM更新完成
    await nextTick()
    const targetItem = document.querySelector('.item[key="key-1"]')
    if (targetItem) {
        targetItem.scrollIntoView({
            behavior: 'instant',
            block: 'start'
        })
    }
}

适合需要保留特定元素可见性的场景。

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