vue单页应用实现监听页面滚动的距离

最新推荐文章于 2024-12-10 16:06:33 发布

原创最新推荐文章于 2024-12-10 16:06:33 发布 · 5.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue相关专栏收录该内容

7 篇文章

订阅专栏

本文介绍在Vue项目中如何正确监听页面滚动事件并获取卷曲高度，解决了常见的获取高度总为0的问题，通过在mounted钩子中添加事件监听器并在methods中定义处理函数，实现了根据页面滚动位置执行不同操作。

vue项目中，获取TMD页面卷进去的高度总失败，比如：

let top = document.documentElement.scrollTop || document.body.scrollTop;

console.log(top)// 0;

解决的办法如下

mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll () {
      let scrollY = document.documentElement.scrollTop
      if (scrollY > 600) {
          // do something...
           }
        else {
        // do something...      }
    }
  }