最近開始嘗試vue3開發(fā)項(xiàng)目鞭衩，用了ant-design-vue框架，但是發(fā)現(xiàn)沒有滾動(dòng)條組件娃善，因此自己嘗試著寫了一個(gè)醋旦，有需要的可以使用，有什么問題可以給我提issue会放。

地址：https://github.com/chenjiaj/c-scrollbar
查看效果：https://chenjiaj.github.io/c-scrollbar/

基于vue3的滾動(dòng)條組件

一饲齐、使用

npm install c-scrollbar --save // 下載依賴

全局注冊(cè) main.ts

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

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

局部引入

import {CScrollbar} from 'c-scrollbar';
export default{
  components: {
    CScrollbar,
  },
}

App.vue

<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>

二、屬性

注：同時(shí)設(shè)置maxHeight崇裁、height或maxWidth匕坯、width，以較小者生效,盡量避免同事設(shè)置

三拔稳、方法

四葛峻、事件

五、參考實(shí)例：

<template>
  <c-scrollbar width="300px"
             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)'
             }"
             @scroll="handleScroll">
    <ol>
      <li>11111121212112121211212121121212112121211212121121212112
        1212112121221212111121212112121211212121121212112121211212121
        1212121121212112121221212111121212112121211212121121212112121
        211212121121212112121211212122121211212121121212112121211212121121
        212112121211212121121212112121221212</li>
      <li>1121212</li>
      <li>1121212</li>
      <li>1121212</li>
      <li>1121212</li>
      <li>1121212</li>
      <li>1121212</li>
      <li>1121212</li>
      <li>1121212</li>
      <li>1121212</li>
      <li>1121212</li>
    </ol>
  </c-scrollbar>
</template>

<script lang="ts">
export default {
  setup() {
    function handleScroll(event: Event) {
      console.log(event);
    }
    return {
      handleScroll,
    };
  },
};
</script>
  

<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); // 設(shè)置距離頂部滾動(dòng)距離
      scrollbarRef.value.setScrollLeft(10); // 設(shè)置距離左邊滾動(dòng)距離
    });
    return {
      scrollbarRef,
    };
  },
};
</script>

更多例子：參考src文件夾中example中的.vue文件

六巴比、實(shí)現(xiàn)核心思路

1. 通過MutationObserver术奖、window.resize監(jiān)聽div元素內(nèi)容或?qū)傩愿淖儭⒈O(jiān)聽窗口改變?nèi)ジ聺L動(dòng)條滑塊高度
2. 通過::-webkit-scrollbar（谷歌轻绞、Edge）采记、 scrollbar-width: none;-ms-overflow-style: none;（火狐）隱藏原生滾動(dòng)條
3. 通過監(jiān)聽原生scroll事件去改變滑塊的高度
4. 點(diǎn)擊軌道或拖動(dòng)滑塊時(shí)，監(jiān)聽mousedown事件去改變外層wrap的scrollTop或scrollLeft值政勃。（改變此值會(huì)觸發(fā)scroll事件）