Vue 添加滑动条监听

最新推荐文章于 2024-08-23 09:56:05 发布

邱新磊

最新推荐文章于 2024-08-23 09:56:05 发布

阅读量1.3k

点赞数 1

分类专栏： Vue 文章标签： vue scroll

本文链接：https://blog.csdn.net/xuzailin/article/details/82227964

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在钩子中添加监听

 mounted () {
     const _this = this
     document.documentElement.addEventListener('scroll', _this.handleScroll, true)
 },

在销毁前移除监听

beforeDestroy() {
    const _this = this
    document.documentElement.removeEventListener('scroll', _this.handleScroll, true)
 }

其中调用的方法

handleScroll() {
    // 窗口可视高度
    var windowHeight = document.body.clientHeight
    // 窗口实际高度
    var height = document.body.scrollHeight
    // 滑动条移动高度
    var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    // 滑动条距离底部距离
    var bottomHeight = height - windowHeight - scrollTop
    if (bottomHeight <= 20) {
        // 调用处理方法,可实现懒加载
    }
},