直播软件搭建,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>
以上就是 直播软件搭建,vue3 页面回到顶部(平缓滚动效果),更多内容欢迎关注之后的文章
标签:滚动,顶部,直播,vue3,scrollTop,document,页面 From: https://www.cnblogs.com/yunbaomengnan/p/17140878.html