当前位置：首页 > news >正文

Vue自定义滚动条的实现

news 2025/9/23 10:24:55

自定义滚动条的实现方式

方法一：使用纯 CSS（推荐，轻量且兼容性好）

适用于现代浏览器，尤其是 WebKit 内核（Chrome、Edge、Safari）。

样式说明：

/* 仅支持 WebKit 浏览器 */
::-webkit-scrollbar {width: 8px;height: 8px;
}::-webkit-scrollbar-track {background: #f0f0f0;border-radius: 4px;
}::-webkit-scrollbar-thumb {background-color: #c1c1c1;border-radius: 4px;border: 2px solid transparent;background-clip: content-box;
}::-webkit-scrollbar-thumb:hover {background-color: #999;
}

示例代码（Pure CSS）

<template><div class="scroll-container"><div class="scroll-content"><div v-for="n in 50" :key="n" class="item">项目 {{ n }}</div></div></div>
</template><script>
export default {name: 'ScrollCssDemo'
}
</script><style scoped>
.scroll-container {max-height: 300px;overflow-y: auto;border: 1px solid #ddd;padding: 10px;
}/* 自定义滚动条样式 */
.scroll-container::-webkit-scrollbar {width: 8px;
}.scroll-container::-webkit-scrollbar-track {background: #f0f0f0;border-radius: 4px;
}.scroll-container::-webkit-scrollbar-thumb {background-color: #bbb;border-radius: 4px;border: 2px solid transparent;background-clip: content-box;
}.scroll-container::-webkit-scrollbar-thumb:hover {background-color: #999;
}.item {padding: 8px;border-bottom: 1px solid #eee;
}
</style>

方法二：使用第三方库（如 `vue-perfect-scrollbar`）

适用于需要更复杂交互（如横向滚动、嵌套滚动等）。

安装：

npm install vue-perfect-scrollbar perfect-scrollbar

示例代码

<template><div class="scroll-wrapper"><perfect-scrollbar style="max-height: 300px;"><div v-for="n in 50" :key="n" class="item">项目 {{ n }}</div></perfect-scrollbar></div>
</template><script>
import PerfectScrollbar from 'vue-perfect-scrollbar'
import 'perfect-scrollbar/css/perfect-scrollbar.css'export default {name: 'ScrollPerfectDemo',components: {PerfectScrollbar}
}
</script><style scoped>
.scroll-wrapper {border: 1px solid #ddd;padding: 10px;
}.item {padding: 10px;border-bottom: 1px solid #eee;
}
</style>

方法三：使用 Element UI 的 `el-scrollbar` 组件

Element UI 自带滚动容器，样式可自定义。

<el-scrollbar style="height: 300px;"><div v-for="item in items" :key="item.id">{{ item.name }}</div>
</el-scrollbar>

你可以通过覆盖 Element UI 的样式类 .el-scrollbar__bar 和 .el-scrollbar__thumb 来实现自定义外观。

示例代码（Element UI）

<template><div class="scroll-wrapper"><el-card><el-scrollbar style="height: 300px;"><div v-for="n in 50" :key="n" class="item">项目 {{ n }}</div></el-scrollbar></el-card></div>
</template><script>
export default {name: 'ScrollElementDemo'
}
</script><style scoped>
.item {padding: 10px;border-bottom: 1px solid #eee;
}/* 可选：覆盖 Element UI 的滚动条样式 */
.el-scrollbar__bar {background: transparent;
}.el-scrollbar__thumb {background-color: #bbb;border-radius: 4px;
}
</style>