vue简单实现滚动条

在Vue中，可以通过监听滚动事件来实现一个简单的滚动条。以下是一个基本的例子：

<template>
  <div class="scroll-container" @scroll="handleScroll">
    <!-- 内容过多，会自动出现滚动条 -->
    <div class="content">
      <!-- 这里是你的内容 -->
    </div>
  </div>
</template>
 
<script>
export default {
  methods: {
    handleScroll(event) {
      // 获取滚动容器的高度
      const containerHeight = this.$el.clientHeight;
      // 获取内容区域的高度
      const contentHeight = this.$refs.content.clientHeight;
      // 获取当前滚动条的位置
      const scrollTop = event.target.scrollTop;
      // 计算滚动条位置百分比
      const scrollPercent = scrollTop / (contentHeight - containerHeight);
      console.log(scrollPercent);
      // 根据滚动条位置百分比执行其他逻辑
    }
  }
};
</script>
 
<style>
.scroll-container {
  height: 400px; /* 设置一个固定的高度 */
  overflow-y: auto; /* 开启垂直滚动条 */
}
.content {
  height: 1000px; /* 假设内容区域很高 */
}
</style>

在这个例子中，.scroll-container 类定义了一个具有固定高度并且内容超出时会显示滚动条的容器。通过监听容器的 scroll 事件，我们可以在 handleScroll 方法中获取滚动条的位置和状态，并据此执行相关的逻辑。在这个例子中，我们计算了滚动条的位置百分比，并在控制台打印出来。你可以根据实际需求进一步扩展这个逻辑。