vue 滚动条样式

/* 自定义滚动条样式 */
/* 滚动条整体部分 */
ScrollBar {
  width: 10px; /* 设置滚动条宽度 */
}

/* 滚动条的轨道 */
ScrollBar-track {
  background-color: #f1f1f1; /* 轨道背景颜色 */
  border-radius: 10px; /* 圆角 */
}

/* 滚动条的滑块 */
ScrollBar-thumb {
  background-color: #888; /* 滑块背景颜色 */
  border-radius: 10px; /* 圆角 */
}

/* 滑块悬停时的样式 */
ScrollBar-thumb:hover {
  background-color: #555; /* 悬停时的背景颜色 */
}

<!-- 在 Vue 组件中使用自定义滚动条样式 -->
<template>
  <div class="scroll-container">
    <!-- 这里放置需要滚动的内容 -->
    <div class="content">
      <!-- 内容区域 -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'ScrollComponent'
}
</script>

<style scoped>
.scroll-container {
  height: 300px; /* 设置容器高度 */
  overflow-y: scroll; /* 启用垂直滚动条 */
}

/* 使用自定义滚动条样式 */
.scroll-container::-webkit-scrollbar {
  width: 10px;
}

.scroll-container::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  border-radius: 10px;
}

.scroll-container::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
}

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

解释说明：

1. CSS 部分:

   • ScrollBar 是一个通用的选择器，用于定义滚动条的整体样式。
   • ScrollBar-track 定义了滚动条轨道的样式。
   • ScrollBar-thumb 定义了滚动条滑块的样式。
   • ScrollBar-thumb:hover 定义了滑块在悬停时的样式。

2. HTML 部分:

   • scroll-container 是一个包含可滚动内容的容器。
   • content 是实际的内容区域，可以根据需要添加更多内容。

3. Vue 组件:

   • 使用 ::webkit-scrollbar 系列伪元素来实现自定义滚动条样式。
   • height 和 overflow-y 属性确保容器可以显示滚动条。
   • scoped 样式确保这些样式只应用于当前组件。