直播源码开发,页面回到顶部(平缓滚动效果)

发布时间 2023-06-19 14:37:00作者: 云豹科技-苏凌霄

直播源码开发,页面回到顶部(平缓滚动效果)

 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>

 

 以上就是直播源码开发,页面回到顶部(平缓滚动效果), 更多内容欢迎关注之后的文章