今天给大家分享一个挺不错的 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');

使用组件

c-scrollbar 支持如下参数配置

参考示例

<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，今天就分享到这里了。