类似 elScrollbar 滚动条

背景

在使用 antd vue 的时候，发现没有提供像 element-plus 的 ElScrollbar 这样子的滚动条组件，就在 bing.com 搜索了一下关键字，有一个文章写得特别好，故直接采用了。

参考这篇文章：https://segmentfault.com/a/1190000043032644

---

simplebar-vue： https://www.npmjs.com/package/simplebar-vue

OverlayScrollbars：https://github.com/KingSora/OverlayScrollbars/tree/master

simplebar-vue

使用教程：https://github.com/Grsmto/simplebar/blob/master/packages/simplebar/README.md#options

1. 安装模块

npm install simplebar-vue -S

2. 全局引入

import "ant-design-vue/dist/reset.css";
import Antd, { message } from "ant-design-vue";
import simplebar from "simplebar-vue"; 
import "simplebar-vue/dist/simplebar.min.css"; 
import "cropperjs/dist/cropper.css";
import "./assets/main.scss"; 
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router/router.js";

message.config({ top: "93px", duration: 3, maxCount: 3 });

const app = createApp(App);

app.component("simplebar", simplebar); 

app.use(Antd);
app.use(createPinia());
app.use(router);

app.mount("#app");

注意

main.scss 是在下面 simplebar-vue/dist/simplebar.min.css，App.vue 的上面

3. 组件使用

<template>
  <simplebar
    data-simplebar-auto-hide="true"
    style="height: var(--navbar-menu-height)"
  >
    <div v-for="menuItem in menuList" :key="menuItem.name + 't'"></div>
  </simplebar>
</template>

4. 修改背景颜色

main.scss

/* color palette from <https://github.com/vuejs/theme> */
:root {
  --navbar-logo: 64px;
  --navbar-menu-height: calc(100vh - var(--navbar-logo));
}
// 滚动条颜色设置
.simplebar-scrollbar::before {
  background-color: #c7c9cc;
  transition-delay: 0.3s;
  outline: none;
}

// 实现hover到页面显示滚动条，离开隐藏滚动条
// https://github.com/Grsmto/simplebar/issues/650#issuecomment-1880101103
.simplebar-wrapper:hover ~ .simplebar-track > .simplebar-scrollbar:before {
  opacity: 0.5 !important;
  transition: none !important;
}

5. hover 显示滚动条，离开隐藏

main.scss

.simplebar-wrapper:hover ~ .simplebar-track > .simplebar-scrollbar:before {
  opacity: 0.5 !important;
}

代码来自 GitHub issue https://github.com/Grsmto/simplebar/issues/650#issuecomment-1880101103