overlayscrollbars自定义滚动条插件，支持vue,react,jquery,js等。滚动样式支持多主题。
//css
<link href="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.13.3/css/OverlayScrollbars.min.css"/>
//js原生
<script src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.13.3/js/OverlayScrollbars.min.js"></script>
//jquery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
//依赖jQuery
<script src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.13.3/js/jquery.overlayScrollbars.min.js"></script>
npm install overlayscrollbars
引入样式文件
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.13.3/css/OverlayScrollbars.min.css" />
如果需要使用其他滚动条样式，需要下载并引入新的css文件，将css文件下载下来。然后引入到文件中。
为了避免被覆盖，自定义样式需要引入到overlayscrollbars.min.css的下面
<link rel="stylesheet" href="./os-theme-round-dark.css" />
所有滚动条css样式：
https://kingsora.github.io/OverlayScrollbars/etc/os-theme-round-dark.css
https://kingsora.github.io/OverlayScrollbars/etc/os-theme-round-light.css
https://kingsora.github.io/OverlayScrollbars/etc/os-theme-block-dark.css
https://kingsora.github.io/OverlayScrollbars/etc/os-theme-block-light.css
https://kingsora.github.io/OverlayScrollbars/etc/os-theme-block-light.css
https://kingsora.github.io/OverlayScrollbars/etc/os-theme-thin-light.css
https://kingsora.github.io/OverlayScrollbars/etc/os-theme-thick-dark.css
https://kingsora.github.io/OverlayScrollbars/etc/os-theme-thick-light.css
https://kingsora.github.io/OverlayScrollbars/etc/os-theme-minimal-light.css
https://kingsora.github.io/OverlayScrollbars/etc/os-theme-minimal-dark.css
注意：在配置options参数时，className值应该为对应的css文件名称。例如className:'os-theme-round-dark'
定义一个容器，设置宽高。
<div id="container_box" style="width:500px;height:200px">
...
</div>
引入js文件
<script src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.13.3/js/OverlayScrollbars.min.js"></script>
如果项目依赖于jquery。需要引入jquery。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
调用overlayscrollbars API
document.addEventListener("DOMContentLoaded", function() {
OverlayScrollbars(document.querySelector("#container_box"), {
className:'os-theme-round-dark'
});
});
如果依赖于jquery,则可以使用下面的方法调用
$(function(){
$('#container').overlayScrollbars({
className:'os-theme-round-dark' // 使用其他的滚动条样式才需要设置此项
})
})
npm install overlayscrollbars
在main.js中全局注册
import 'overlayscrollbars/css/OverlayScrollbars.css';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
// global registration
Vue.component('overlay-scrollbars', OverlayScrollbarsComponent);
在vue sfc单文件中局部注册
import 'overlayscrollbars/css/OverlayScrollbars.css';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
export default {
components:{
"overlay-scrollbars":OverlayScrollbarsComponent
},
data(){
return {}
}
}
<template>
<div>
<overlay-scrollbars style="height:100%" :options="options">
...
</overlay-scrollbars>
</div>
</template>
<sctipt>
export default {
data(){
return {
options:{
className:'os-theme-round-dark'
...
}
}
}
}
</sctipt>
使用js实现自定义滚动条，完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>自定义滚动条插件overlay scrollbars</title>
<link rel="stylesheet" href="./overlayscrollbars.min.css" />
<link
rel="stylesheet"
href="./overlayscrollbars.os-theme-round-dark.css"
/>
</head>
<body>
<div
id="container"
style="width: 500px; height: 200px; overflow: hidden"
>
html.os-html,html.os-html>.os-host{display:block;overflow:hidden;box-sizing:border-important;position:absolute!important;display:block!important;top:0!important;left:0!important;marginnherit;text-align:inherit;text-shadow:inherit;text-overflow:inherit;letter-spacing:inherit;word-spacing:inherit;line-height:inherit;unicode-bidi:inherit;direction:inherit;color:inherit;cursor:text}.os-resize-observer,.os-resize-observer-host{box-sizing:inherit;display:block;visibility:hidden;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.os-resize-observer-host{padding:inherit;border:inherit;border-color:transparent;border-style:solid;box-sizing:border-box}.os-resize-observer-host.observed{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}.os-resize-observer-host>.os-resize-observer,.os-resize-observer-host.observed>.os-resize-observer{height:200%;width:200%;padding:inherit;border:inherit;margin:0;display:block;box-sizing:content-box}.os-resize-observer-host.observed>.os-resize-observer,.os-resize-observer-host.observed>.os-resize-observer:before{display:flex;position:relative;flex-grow:1;flex-shrink:0;flex-basis:auto;box-sizing:border-box}.os-resize-observer-host.observed>.os-resize-os-resize-observer-dummy-animation}object.os-resize-observer{box-sizing:border-box!important}@-webkit-keyframes
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.13.3/js/OverlayScrollbars.min.js"></script>
<script>
OverlayScrollbars(document.querySelector("#container"), {});
</script>
</body>
</html>