vue 监听滚动条页面滚动动画-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue 监听滚动条页面滚动动画。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

以页面底部的“回到顶部”功能为例，滚动动画的实现思路是，当点击按钮时，获取当前滚动条的位置，调用定时器函数，每个时间间隔对滚动条的位置递减，直至减小到0，清除定时器，即可回到页面顶部。

当滚动条没有离开首页的一个屏幕高度时，“回到顶部”按钮应设为不可见，可以监听当前滚动条的位置，小于一个屏幕高度时，将按钮的v-show属性设为false，大于一个屏幕高度时，则设为true。

代码示例

<template>
  <div id="index">
    <div class="toTop" v-show="showTop" @click="toTop">
      <img src="../assets/img/angle-square-up.png" alt="" width="35px" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTop: false,
    };
  },
  mounted() {
    // 添加监听事件
    window.addEventListener("scroll", this.scrolling);
  },
  methods: {
  	// 监听事件
    scrolling() {
      let current =
        document.documentElement.scrollTop || document.body.scrollTop;
      let vh = window.innerHeight;
      if (current >= vh) {
        this.showTop = true;
      } else {
        this.showTop = false;
      }
    },
    // 点击事件
    toTop() {
      // 获取当前滚动条的位置
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 滚动动画
      const timeTop = setInterval(() => {
        document.body.scrollTop =
          document.documentElement.scrollTop =
          top -=
            50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
  },
};
</script>
<style lang="scss" scoped>
#index {
  .toTop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    cursor: pointer;
    width: 35px;
    height: 35px;
    z-index: 2;
    opacity: 0.3;
  }
}
img:hover {
  opacity: 0.5;
}
</style>

获取滚动条当前位置
document.documentElement.scrollTop || document.body.scrollTop
获取屏幕高度
window.innerHeight

弄懂了这个原理之后，顶部导航条的实现就十分简单了，如果不想写滚动动画的话，在<a>标签的href属性中填入目标跳转位置的元素的id，就可以非常方便的直接跳转。

导航条如图
vue 监听滚动条页面滚动动画
代码示例

<template>
  <div id="navigation">
    <ul class="part1">
      <li>LOGO</li>
    </ul>
    <ul class="part2">
      <!-- href="/" 跳转到首页 -->
      <li><a href="/">HOME</a></li>
      <!-- href="/#about" 跳转到首页的id为about的元素位置 -->
      <li><a href="/#about">ABOUT</a></li>
      <li><a href="/#paper">PAPER</a></li>
      <li><a href="/#team">TEAM</a></li>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
#navigation {
  width: 94vw;
  height: 60px;
  margin: 0 auto;
  // 弹性布局
  display: flex;
  justify-content: space-between;
  align-items: center;
  .part2 {
    // 弹性布局
    display: flex;
    justify-content: center;
    align-items: center;
  }
  li {
    width: 100px;
    height: 40px;
    line-height: 40px;
    font-weight: bold;

    a:link {
      color: #8e9eab;
    }
    a:visited {
      color: #8e9eab;
    }
    a:hover {
      color: #4f4f4f;
    }
    a:active {
      color: #4f4f4f;
    }
  }
}
</style>

插个题外话，如何优雅地修改<a>标签的默认样式
主要是设置 a:link a:visited a:hover a:active 这几个css属性

修改前
vue 监听滚动条页面滚动动画
修改后

附上代码

a {
	// 清除默认下划线
    text-decoration: none;
}

// 超链接初始样式
a:link {
    color: #8e9eab;
}

// 超链接被访问后的样式
a:visited {
    color: #8e9eab;
}

// 鼠标悬停时的样式
a:hover {
    color: #4f4f4f;
}

// 点击超链接时的样式
a:active {
    color: #8e9eab;
}