VUE滚动条事件，监听滚动条位置，控制按钮显示隐藏

在Vue中，你可以使用原生的滚动事件来监听滚动条的位置，并据此控制按钮的显示和隐藏。以下是一个简单的例子：

<template>
  <div class="scroll-container" @scroll="handleScroll">
    <!-- 长内容以确保出现滚动条 -->
    <div class="long-content">
      <!-- 内容 -->
    </div>
    <button v-show="showButton" @click="scrollToTop">回到顶部</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      showButton: false, // 控制按钮是否显示
      distance: 200, // 设定距离顶部多远时显示按钮
    };
  },
  methods: {
    handleScroll(event) {
      // 检查滚动位置
      this.showButton = event.target.scrollTop > this.distance;
    },
    scrollToTop() {
      // 滚动到顶部
      this.$el.scrollTop = 0;
    },
  },
};
</script>
 
<style>
.scroll-container {
  height: 300px; /* 设置一个固定的高度 */
  overflow-y: auto; /* 开启垂直滚动 */
  position: relative;
}
.long-content {
  height: 1000px; /* 假设内容很长 */
}
</style>

在这个例子中，.scroll-container 是一个具有固定高度并且内容可滚动的容器。当它的滚动条滚动时，handleScroll 方法会被触发，并根据滚动的位置更新 showButton 的值。当滚动距离超过 distance 设定的值时，按钮会显示出来。点击按钮会执行 scrollToTop 方法，将滚动条滚动到顶部。