vue检测滚动条到了底部

最新推荐文章于 2024-05-09 12:17:39 发布

A仔979

最新推荐文章于 2024-05-09 12:17:39 发布

阅读量4.3k

点赞数 2

分类专栏： vue知识文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/qq_62336448/article/details/124322496

版权

vue知识专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个Vue项目中如何监听窗口滚动事件，当滚动高度加上可视高度等于内容高度时，触发加载更多数据的方法。通过在mounted生命周期钩子中添加滚动监听，并在handleScroll方法中获取滚动高度、可视高度和内容高度，实现动态加载功能。

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

首先mounted挂载监听

mounted(){
    window.addEventListener("scroll", this.handleScroll, true);
    }

methods创建监听方法

methods:{
        handleScroll(){
            let scrollTop = document.documentElement.scrollTop;//滚动高度
            let clientHeight = document.documentElement.clientHeight;//可视高度
            let scrollHeight = document.documentElement.scrollHeight;//内容高度
            console.log("滚动高度",scrollTop);
            console.log("可视高度",clientHeight);
            console.log("内容高度",scrollHeight);
        }
    },