vue滚动条样式怎么修改

/* 覆盖默认滚动条样式 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* 设置滚动条轨道的颜色 */
::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

/* 设置滚动条滑块的颜色 */
::-webkit-scrollbar-thumb {
  background-color: #888;
}

/* 设置滚动条滑块悬停时的颜色 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

import { ref } from 'vue';

export default {
  setup() {
    // 创建一个 ref 来存储滚动条的 DOM 元素
    const scrollbar = ref(null);

    // 在 mounted 生命周期钩子中，为滚动条添加自定义样式
    onMounted(() => {
      if (!scrollbar.value) return;

      scrollbar.value.style.width = '10px';
      scrollbar.value.style.height = '10px';
      scrollbar.value.style.backgroundColor = '#f5f5f5';
    });
  },
};

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

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

export default {
  setup() {
    const scrollbar = ref(null);

    onMounted(() => {
      if (!scrollbar.value) return;

      // 在这里为滚动条添加自定义样式
    });
  },
};
</script>

<style>
.custom-scrollbar {
  overflow: auto;
  width: 100%;
  height: 100%;

  /* 滚动条样式 */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background-color: #f5f5f5;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #888;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #555;
  }
}
</style>