在 Vue 中修改滚动条样式的方法有：使用 CSS 覆盖默认样式；使用 JavaScript 动态修改样式；使用自定义组件。
修改 Vue 滚动条样式
在 Vue 中，可以通过以下步骤轻松修改滚动条样式：
1. 使用 CSS 覆盖默认样式
/* 覆盖默认滚动条样式 */
::-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;
}2. 使用 JavaScript 动态修改样式
立即学习“前端免费学习笔记（深入）”；
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';
});
},
};3. 使用自定义组件
您可以创建一个自定义滚动条组件，并针对特定需求自定义其样式：
