监听滚动条

最新推荐文章于 2024-09-06 22:20:29 发布

会飞的土豆i

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量130

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/gsx257318/article/details/127815492

版权

Vue 滚动事件回顶按钮用户体验定时器

关键词由CSDN通过智能技术生成

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!-- 距离顶部按钮 -->
    <div v-if="backTop" class="backtop" @click="handleBackTop">距离顶部</div>


export default {
  name: "Home",
  components: { NavbarSearch },
  data() {
    return {
      backTop: false,
    };
  },
  mounted() {
    this.$el.addEventListener("scroll", (event) => {
      // 获取滚动条距离顶部滚动距离
      let scrollTop = event.target.scrollTop;
      // 大于100px则显示 距离顶部；否则隐藏
      if (scrollTop > 100) {
        this.backTop = true;
      } else {
        this.backTop = false;
      }
    });
  },
  methods: {
    handleBackTop() {
      // 获取当前滚动条距离顶部的位置
      let scrollTop = this.$el.scrollTop;
      let timer = setInterval(() => {
        // 当递减距离顶部小于0的时候，停止时间循环
        if (scrollTop <= 0) {
          clearInterval(timer);
          this.$el.scrollTop = 0;
          return;
        }

        scrollTop = scrollTop - 50;
        this.$el.scrollTop = scrollTop;
      }, 8);
    },
  },