直播软件搭建，vue3 页面回到顶部（平缓滚动效果）

云豹网络科技

于 2023-02-21 14:16:50 发布

阅读量380

点赞数

CC 4.0 BY-SA版权

分类专栏：直播系统源码文章标签： javascript 前端 vue.js

原文链接：https://blog.csdn.net/weixin_43743175/article/details/126617188?spm=1001.2014.3001.5502

直播系统源码专栏收录该内容

1326 篇文章

订阅专栏

文章介绍了如何在Vue3环境中创建直播软件时，实现页面平缓滚动回到顶部的效果。通过编写`handleScroll`函数，利用`setInterval`进行递减滚动值来实现平滑滚动，并在组件挂载时添加滚动事件监听。

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

直播软件搭建，vue3 页面回到顶部（平缓滚动效果）
common.js

// 页面回到顶部（滚动效果）
export const handleScroll = () =>{
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    console.log(scrollTop, "scrollTop");
    if (scrollTop > 0) {
        const timeTop = setInterval(() =>{
            document.documentElement.scrollTop = document.body.scrollTop = scrollTop -= 50; //一次减50往上滑动
            if (scrollTop <= 0) {
                clearInterval(timeTop);
            }
        },
        10); //定时调用函数使其更顺滑
    }
};

xxx.vue文件

<script setup>
import { handleScroll } from '@/util/common'
import { reactive, toRefs, onBeforeMount, onMounted, computed } from 'vue'
 
onMounted(async () => {
	//监听滚动事件
	window.addEventListener('scroll', handleScroll, { once: true })
})
</script>