vue 滚动条事件监听

caiiac / 2023-07-31 / 原文

css: .active{ margin-top:-60px; } .trans{ transition: all 300ms; } >

mounted() { // 监听页面滚动事件 window.addEventListener("scroll", this.scrolling); }, beforeDestroy() { window.removeEventListener("scroll", this.scrolling); },

`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 到了最顶部")
  } 
   if (scrollTop >=30) {
    this.isActive=true
    console.log("header 到了最顶部")
  } else{
     this.isActive=false
  }

},`````