ios长列表滚动位置无法缓存

[zhanglong1009]

<div class="keepA">
        <input type="text">
        <ul>
            <li class="li" @click="toNext(i)" v-for="i in 100">{{ i }}</li>
        </ul>
 </div>

ios真机调试时，长列表滚动后，没法缓存滚动的位置，会回到顶部。input的内容是正常缓存的。

[JoeshuTT]

这个长列表的滚动容器样式css代码是怎么样的

[zhanglong1009]

<template>
    <div class="keepA">
        <div>列表页面</div>
        <input type="text">
        <ul>
            <li class="li" @click="toNext(i)" :style="{background:`#${Math.floor(Math.random()*16777215).toString(16).padStart(6, '0')}`}" v-for="i in 100">{{ i }}</li>
        </ul>
    </div>
</template>

<script setup lang='ts'>
    import { useRouter } from 'vue-router';
    const router = useRouter()

    const toNext = (i: number) => {
        router.push({
            path: '/keepB',
            query: {
                no: i
            }
        })
    }
</script>

<style lang='scss' scoped>
    .li {
        height: 50px;
        text-align: center;
        line-height: 50px;
    }
</style>

这个是完整代码

[zhanglong1009]

<template>
    <div class="keepA">
        <div>列表页面</div>
        <input type="text">
        <ul>
            <li class="li" @click="toNext(i)" :style="{background:`#${Math.floor(Math.random()*16777215).toString(16).padStart(6, '0')}`}" v-for="i in 100">{{ i }}</li>
        </ul>
    </div>
</template>

<script setup lang='ts'>
    import { useRouter } from 'vue-router';
    const router = useRouter()

    const toNext = (i: number) => {
        router.push({
            path: '/keepB',
            query: {
                no: i
            }
        })
    }
</script>

<style lang='scss' scoped>
    .li {
        height: 50px;
        text-align: center;
        line-height: 50px;
    }
</style>

这个是完整代码

这是效果图