Vue页面滚动位置获取

一、问题描述

1.从主任务列表页进入编辑，然后返回到主任务列表页仍然保持之前的滚动状态
2.跳转路由然后再返回这个页面，恢复页面滚动位置

二、解决方式

1.监听页面滚动高度

 mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
 },
 methods: {
    handleScroll() {
        let test = document.getElementById('el-table').scrollTop
        console.log(test)
    },
 }

2.在当前路由文件，存入一个scrollY

3.离开当前路由前，记录此时的位置

  beforeRouteLeave(to, from , next) {
    from.meta.scrollY = document.getElementById('el-table').scrollTop
    console.log("离开task=>",from.meta.scrollY)
    next()
  }

4.返回当前路由，自动滚动到上次离开页面时的高度

activated () {
    document.getElementById('test').scrollTop = this.$route.meta.scrollY
}

5.效果演示

//路由跳转前后滚动条位置不变

三、监听页面宽度变化（补充）

如果我们想在页面PC端和H5端之前切换时，获取页面宽度，那么我们可以这么去写：

<script lang="ts" setup>
import { ref, watchEffect } from 'vue'

// 定义边框显示与隐藏变量
const borderChange = ref(true)

// 定义页面宽度变量
const screenWidth = ref(null)

// 监听页面宽度变化
window.addEventListener('resize', () => {
  screenWidth.value = document.body.scrollWidth
})

// 获取页面宽度
watchEffect(() => {
  screenWidth.value = document.body.scrollWidth
  // 可以根据手机不同型号改写
  if (screenWidth.value <= 390) {
    borderChange.value = false
  } else {
    borderChange.value = true
  }
})