VUE滚动监听

最新推荐文章于 2025-10-17 14:08:34 发布

原创最新推荐文章于 2025-10-17 14:08:34 发布 · 582 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文详细介绍了在Vue.js应用程序中如何实现滚动监听，并探讨了相关实现技巧和最佳实践，帮助开发者创建响应式滚动效果。

<template>
  <div class="home">
    <div ref="header" class="header-bg" :class="headerFixed?'issFixed':''">Header</div>
    <div style="height: 500px">111</div>
    <div style="height: 3000px">
        222
        <h1 :class='tx ? "animate__animated animate__backInUp" : ""'>An animated element</h1>
    </div>
    <div>333</div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      offsetTop: 0,
      offsetHeight: 0,
      headerFixed: 0,
      tx:false
    };
  },
  mounted() {
    this.$nextTick(() => {
        
      // 获取吸顶元素的dom
      let header = this.$refs.header;
      // 吸顶元素到top的距离
      this.offsetTop = header.offsetTop;
      // 元素自身的高度
      this.offsetHeight = header.offsetHeight;

      // 监听滚动条
      window.addEventListener("scroll", this.handleScroll);
    });
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      // 得到页面滚动的距离，兼容写法
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // 判断页面滚动的距离是否大于吸顶元素的位置
      this.headerFixed = scrollTop > this.offsetTop - this.offsetHeight;
      console.log(scrollTop);
        if(scrollTop>200){
            this.tx= true;
        }else{
            this.tx= false;
        }
    }
  }
};
</script>

<style>
.issFixed {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 4;
}
.header-bg {
  font-size: 30px;
  background-color: red;
}
</style>