vue3 页面滚动

• 页面使用overflow:auto不会进行影响
• 页面滚动的两种情况
  1、首页滑动到一定的距离，点击跳转页面，点击返回键（不是重新跳转过来的奥），首页的滚动距离还是之前滚动的距离，不变

const pageEle = ref(null);
const data = reactive({
    scrollTop: 0,
});
onMounted(() => {
            // 首页滚动到当前的某个位置，跳转页面在返回后还在当前的位置
            pageEle.value.addEventListener('scroll', (e) => {
                // console.log('滚动高度', e.target.scrollTop);
                data.scrollTop = e.target.scrollTop;
            });
            router.beforeEach((to, from, next) => {
                console.log('from', from);
                if (from.path) {
                    setTimeout(() => {
                        pageEle.value.scrollTop = data.scrollTop;
                    }, 0);
                }

                next();
            });
        });
        onUnmounted(() => {
            pageEle.value.removeEventListener('scroll', (e) => {
                data.scrollTop = e.target.scrollTop;
            });
        });

• pageEle 是当前首页的跟标签，然后监听滚动的距离进行保存，返回的时候进行滚动
  2、首页点击跳转页面滚动的特定的某个元素

    const productEle = ref(null);
    const product3 = ref(null);            
        watch(
            () => route.query,
            (newV) => {
                console.log('new', newV);
                if (newV.hasOwnProperty('num')) {
                    data.num = newV.num;
                    console.log(data.num, 'num');
                } else if (newV.hasOwnProperty('type')) {
                    //首页点击后页面滚动到某一个地方
                    data.num = 0;
                    if (newV.type == 3) {
                        setTimeout(() => {
                            productEle.value.scrollTop = product3.value.offsetTop - 50;
                        }, 50);
                    }
                }
            },
            {
                deep: true,
                immediate: true,
            }
        );

• 首先是当前页面的根标签ref进行获取，当前要滚动的元素标签ref进行获取，然后使用watch进行监听（要使用深度监听，第一次跳转过来不会触发，加定时器是需要ref获取元素的高度，否则获取不到）

• 目前遇到的两个，希望可以帮助到你们！