今天给大家分享一个挺不错的 vue3.x 自定义系统滚动条组件Cscrollbar。

c-scrollbar 采用 vue3 开发的简易虚拟滚动条组件，用于替代系统原生滚动条。

安装

npm install c-scrollbar

快速引入

import { createApp } from 'vue';
import CScrollbar from 'c-scrollbar';
import App from './App.vue';

createApp(App).use(cScrollbar).mount('#app');

使用组件

<template>
  sdsd
  <c-scrollbar width="100px" height="40px">
    <ul>
      <li>serwerwerwerwer</li>
      <li>serwerwerwerwer</li>
      <li>serwerwerwerwer</li>
      <li>serwerwerwerwer</li>
      <li>serwerwerwerwer</li>
      <li>serwerwerwerwer</li>
      <li>serwerwerwerwer</li>
    </ul>
  </c-scrollbar>
</template>

c-scrollbar 支持如下参数配置

参考示例

<template>
  sdsd
  <c-scrollbar ref="scrollbarRef"
               width="100px"
               height="100px"
               trigger="hover"
               direction="all"
               :vBarStyle="{
               'background-color':'rgba(0,0,0,0.1)'
             }"
               :hBarStyle="{
               'background-color':'rgba(0,0,0,0.2)'
             }"
               :vThumbStyle="{
                'background-color':'rgba(0,0,0,0.3)'
             }"
               :hThumbStyle="{
                'background-color':'rgba(0,0,0,0.4)'
             }">
    <ul>
      <li>serwerwerwerwer</li>
      <li>serwerwerwerwer</li>
      <li>serwerwerwerwer</li>
      <li>serwerwerwerwer</li>
      <li>serwerwerwerwer</li>
      <li>serwerwerwerwer</li>
      <li>serwerwerwerwer</li>
      <li>serwerwerwerwer</li>
      <li>serwerwerwerwer</li>
      <li>serwerwerwerwer</li>
      <li>serwerwerwerwer</li>
      <li>serwerwerwerwer</li>
      <li>serwerwerwerwer</li>
      <li>serwerwerwerwer</li>
      <li>serwerwerwerwer</li>
      <li>serwerwerwerwer</li>
      <li>serwerwerwerwer</li>
      <li>serwerwerwerwer</li>
      <li>serwerwerwerwer</li>
      <li>serwerwerwerwer</li>
      <li>serwerwerwerwer</li>
    </ul>
  </c-scrollbar>
</template>

<script lang="ts">
import { onMounted, ref } from 'vue';
import {CScrollbar} from 'c-scrollbar';

export default {
  components: {
    CScrollbar,
  },
  setup() {
    const scrollbarRef = ref();
    onMounted(() => {
      scrollbarRef.value.setScrollTop(100); // 设置距离顶部滚动距离
      scrollbarRef.value.setScrollLeft(10); // 设置距离左边滚动距离
    });
    return {
      scrollbarRef,
    };
  },
};
</script>

通过 MutationObserver、window.resize 监听div元素内容或属性改变、监听窗口改变去更新滚动条滑块高度。

// 演示地址
https://chenjiaj.github.io/c-scrollbar/
// 仓库地址
https://github.com/chenjiaj/c-scrollbar

OK，今天就分享到这里了。