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

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

 common.js

 

1

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

​

xxx.vue文件 

 

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

 

 以上就是 直播软件搭建，vue3 页面回到顶部（平缓滚动效果），更多内容欢迎关注之后的文章