scrollbar：自定义滚动条插件对比&实战

前端自定义滚动条主流库：simplebar、perfect‑scrollbar、OverlayScrollbars，还有框架封装版，用来统一多浏览器滚动条样式，替代原生丑陋滚动条。

主流库对比

注意：浏览器 CSS 伪类::-webkit-scrollbar仅 Chrome 系生效，Firefox 不支持，生产要兼容多浏览器必须用 JS 插件。

1. SimpleBar（推荐，上手最简单）

原生 JS

npm install simplebar

import SimpleBar from 'simplebar';
import 'simplebar/dist/simplebar.css';

// html <div id="box" style="height:300px"></div>
const sb = new SimpleBar(document.querySelector('#box'), {
  autoHide: true, // hover才显示滚动条；false永久显示
});
// 内容动态变化手动更新：sb.recalculate()

简写：直接加属性 data‑simplebar

<div data-simplebar style="height:300px">长内容……</div>

Vue3 simplebar‑vue

npm install simplebar-vue

<template>
  <SimpleBar style="height:300px" :autoHide="false">
    <div v-for="i in 50" :key="i">{{i}}</div>
  </SimpleBar>
</template>
<script setup>
import SimpleBar from 'simplebar-vue';
import 'simplebar/dist/simplebar.min.css';
</script>

React simplebar‑react

npm install simplebar-react

import SimpleBar from 'simplebar-react';
import 'simplebar/dist/simplebar.min.css';

<SimpleBar style={{maxHeight:300}} autoHide={true}>
  content...
</SimpleBar>

自定义滚动条样式：覆盖 css 变量

.simplebar-scrollbar::before {
  background: #409eff;
  border-radius:6px;
}

2. perfect‑scrollbar

npm install perfect-scrollbar

原生 JS 示例：

import PerfectScrollbar from 'perfect-scrollbar';
import 'perfect-scrollbar/css/perfect-scrollbar.css';

const container = document.querySelector('#scroll');
const ps = new PerfectScrollbar(container, {
  suppressScrollX: true, //关闭横向滚动
  wheelSpeed: 1,
});
//销毁 ps.destroy()

3. OverlayScrollbars（现代 TS 库，SSR 友好）

npm install overlayscrollbars

import { OverlayScrollbars } from 'overlayscrollbars';
import 'overlayscrollbars/overlayscrollbars.css';

OverlayScrollbars(document.querySelector('#box'), {
  scrollbars:{ theme:"os-theme-light" }
});

有官方 vue/react 包，支持 Nuxt、Next，可直接对body做全局滚动条美化。

常见踩坑

1、容器必须设置固定高度 /max‑height，否则滚动条不出现；

2、动态加载数据后，需要调用实例方法recalculate()重新计算滚动条尺寸；

3、不要对 body 使用 simplebar，官方不建议；body 美化优先 OverlayScrollbars；

4、不要同时写overflow:auto和插件，插件内部会接管滚动。

选型建议

普通后台管理系统、弹窗列表：SimpleBar，平衡性能与开发效率；

Nuxt/Next SSR 项目，需要美化页面 body 滚动：OverlayScrollbars；

老项目、复杂嵌套滚动：perfect‑scrollbar；

H5 移动端：BetterScroll。