前端Vue 页面滑动监听 拿到滑动的坐标值

前言

前端Vue 页面滑动监听 拿到滑动的坐标值

实现

Vue2写法

js 复制代码
  mounted() {
    // 监听页面滚动事件
    window.addEventListener("scroll", this.scrolling);

  },
methods: {
scrolling() {
      // 滚动条距文档顶部的距离
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // 滚动条滚动的距离
      let scrollStep = scrollTop - this.oldScrollTop;
      console.log("header 滚动距离 ", scrollTop);
      // 更新------滚动前,滚动条距文档顶部的距离
      this.oldScrollTop = scrollTop;

      //变量windowHeight是可视区的高度
      let windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;

      //滚动条到底部的条件
      if (scrollTop + windowHeight == scrollHeight) {
        //你想做的事情
        console.log("header  你已经到底部了");
      }
      if (scrollStep < 0) {
        console.log("header 滚动条向上滚动了!");
      } else {
        console.log("header  滚动条向下滚动了!");
      }
      // 判断是否到了最顶部
      if (scrollTop <= 0) {
        console.log("header 到了最顶部")
      } 
    },

},
  beforeDestroy() {
    window.removeEventListener("scroll", this.scrolling);
  },
相关推荐
风尚云网11 分钟前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子020413 分钟前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing15 分钟前
React核心功能详解(一)
前端·react.js·前端框架
捂月18 分钟前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆26 分钟前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China27 分钟前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q27 分钟前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海28 分钟前
Chrome离线安装包下载
前端·chrome
endingCode32 分钟前
45.坑王驾到第九期:Mac安装typescript后tsc命令无效的问题
javascript·macos·typescript
m512739 分钟前
LinuxC语言
java·服务器·前端