先去OverlayScrollbars官网下载主题。
// OverlayScrollbars 所有主题及效果展示
https://kingsora.github.io/OverlayScrollbars/v1/#!themes
// 官网全部的主题css样式
https://kingsora.github.io/OverlayScrollbars/v1/etc/os-theme-minimal-dark.css
https://kingsora.github.io/OverlayScrollbars/v1/etc/os-theme-minimal-light.css
https://kingsora.github.io/OverlayScrollbars/v1/etc/os-theme-thin-dark.css
https://kingsora.github.io/OverlayScrollbars/v1/etc/os-theme-thin-light.css
https://kingsora.github.io/OverlayScrollbars/v1/etc/os-theme-thick-dark.css
https://kingsora.github.io/OverlayScrollbars/v1/etc/os-theme-thick-light.css
https://kingsora.github.io/OverlayScrollbars/v1/etc/os-theme-round-dark.css
https://kingsora.github.io/OverlayScrollbars/v1/etc/os-theme-round-light.css
https://kingsora.github.io/OverlayScrollbars/v1/etc/os-theme-block-dark.css
https://kingsora.github.io/OverlayScrollbars/v1/etc/os-theme-block-light.css
OverlayScrollbars theme
https://kingsora.github.io/OverlayScrollbars/v1/#!documentation/options
OverlayScrollbars options
使用jquery 的方式配置
先引入样式以及overlayScrollbars js文件。
<head>
<!-- Plugin CSS -->
<link type="text/css" href="path/to/OverlayScrollbars.css" rel="stylesheet"/>
<link type="text/css" href="https://kingsora.github.io/OverlayScrollbars/v1/etc/os-theme-minimal-dark.css" rel="stylesheet"/>
<!-- jQuery JS -->
<script type="text/javascript" src="path/to/jquery.js"></script>
<!-- Plugin JS -->
<script type="text/javascript" src="path/to/jquery.overlayScrollbars.js"></script>
</head>
js 部分，使用并配置overlayScrollbars
//os-theme-minimal-dark 就是 os-theme-minimal-dark.css主题样式文件。
//切记引入顺序：OverlayScrollbars.css在前， os-theme-minimal-dark.css在后。
$("body").overlayScrollbars({
className:'os-theme-minimal-dark'
});
注意： os-theme-minimal-dark.css 样式文件的基类选择器是os-theme-minimal-dark 。
vue配置
安装overlayscrollbars
//先安装依赖
npm install overlayscrollbars
//再安装vue版本的overlayscrollbars
npm install overlayscrollbars-vue
//如果使用了ts，还需要安装overlayscrollbars的类型
npm install @types/overlayscrollbars
注册组件并引入主题文件
把主题样式文件下载下来，然后存放到vue的样式文件夹中，然后再使用全局或局部引入。
// main.js
import { createApp } from "vue";
import "overlayscrollbars/css/OverlayScrollbars.css";
import "@/assets/os-theme-minimal-dark.css";
import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
const app = createApp({});
app.component("OverlayScrollbars", OverlayScrollbarsComponent);
在vue文件中配置
//xx.vue options属性为配置项
<OverlayScrollbars
:options="{ className: 'os-theme-minimal-dark'}"
>
<div></div>
...
</OverlayScrollbars>