手把手教你自定义手搓 Vue 滚动条，让你的页面更独一无二

2023-10-08 02:48:22

掌控滚动条：用 Vue 自定义滚动条展现你的网站个性

在当今崇尚个性化和定制化的时代，你的网站理应脱颖而出。摆脱千篇一律的内置滚动条的束缚，用 Vue 自定义滚动条来彰显你的独到眼光和创意吧。

构建自定义滚动条组件

构建一个 Vue 组件来表示滚动条，定义其样式、行为和功能。例如：

<template>
  <div class="custom-scrollbar">
    <div class="thumb" ref="thumb">
      <div class="handle" ref="handle"></div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  mounted() {
    this.initScrollbar();
  },
  methods: {
    initScrollbar() {
      // 初始化滚动条的代码
    }
  }
};
</script>

<style>
  .custom-scrollbar {
    position: relative;
    overflow-y: scroll;
  }

  .thumb {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    background-color: #ddd;
  }

  .handle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background-color: #999;
  }
</style>

实现双向绑定

实现滚动条与页面内容的双向绑定，让用户滚动滚动条时页面内容相应滚动，反之亦然。例如：

<template>
  <div class="container">
    <div class="content" ref="content">
      <!-- 内容 -->
    </div>
    <custom-scrollbar @scroll="handleScroll"></custom-scrollbar>
  </div>
</template>

<script>
import CustomScrollbar from './CustomScrollbar.vue';

export default {
  components: { CustomScrollbar },
  mounted() {
    this.initScrollbar();
  },
  methods: {
    initScrollbar() {
      // 初始化滚动条的代码
    },
    handleScroll(event) {
      this.$refs.content.scrollTop = event.target.scrollTop;
    }
  }
};
</script>

响应式转化

让滚动条适应不同设备和屏幕尺寸，例如：

<style>
  @media (max-width: 768px) {
    .custom-scrollbar {
      width: 5px;
    }

    .thumb {
      width: 5px;
    }

    .handle {
      width: 100%;
      height: 10px;
    }
  }
</style>