vue3+ts 记录滚动条的位置

额额。。。

已于 2024-03-18 11:41:19 修改

阅读量536

点赞数 10

文章标签： vue.js 前端 javascript

于 2024-03-06 18:33:10 首次发布

本文链接：https://blog.youkuaiyun.com/W_121706551/article/details/136513795

版权

文章介绍了如何在Vue应用中，利用sessionStorage存储和在路由切换时恢复列表组件的滚动位置，以提供连续的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想要的效果是这样的

用的方法很简单，就是sessionStorage存储，下面是代码

路由部分

import {createRouter,createWebHistory,RouteRecordRaw} from 'vue-router'


const routes:Array<RouteRecordRaw>=[
    {
        path:'/',
        component:()=>import('../views/home.vue')
    },
    {
        path:'/about',
        component:()=>import('../views/about.vue')
    }
]

export default createRouter({
    history:createWebHistory(),
    routes
})

home组件

<template>
    <p>home</p>
    <ul ref="scrollRef" @scroll="handleScroll">
        <li v-for="item in list">
            {{ item }}
        </li>
    </ul>
    <button @click="about">去关于</button>
</template>

<script setup lang="ts">
    import {useRouter} from 'vue-router'
    import {onBeforeUnmount,onMounted,reactive,ref} from 'vue'

    const router=useRouter()

    const list=reactive([1,2,3,4,5,6,7,8,9,10])
    const scrollRef=ref<any>(null)

    const about=()=>{
        router.push('/about')
    }
    const handleScroll=(e:any)=>{
        sessionStorage.setItem('currentPageScroll',JSON.stringify(e.target.scrollTop))
    }   

    onMounted(()=>{
       scrollRef.value.scrollTop=JSON.parse(sessionStorage.getItem('scroll') as string) || 
       scrollRef.value.scrollTop===0?JSON.parse(sessionStorage.getItem('currentPageScroll') as string):0
    })
    onBeforeUnmount(()=>{
        sessionStorage.setItem('scroll',JSON.stringify(scrollRef.value.scrollTop))
    })
    
</script>

<style scoped lang="scss">
    ul{
        list-style: none;
        border: 1px solid black;
        height: 200px;
        overflow: auto;
        padding-left: 0;
        li{
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #000;
        }
    }
</style>

about组件

<template>
    <p>about</p>
    <button @click="home">去首页</button>
</template>

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

    const home=()=>{
        router.push('/')
    }
</script>