js 滚动条 simplebar 使用教程

simplebar的使用，千万不要使用GitHub上的bate版本，会有问题。

目前还是6.0的bate测试版，正式版为5.2.1

官网

github

npm

npm那支持vue和其他框架，用法要在那看。

普通html使用

无需jq，只需要new出这个构造函数，并将需要设置滚动条的dom传入即可。

引用

<link rel="stylesheet" href="https://cdn.staticfile.org/simplebar/5.2.1/simplebar.min.css" />
<script src="https://cdn.staticfile.org/simplebar/5.2.1/simplebar.min.js"></script>

这两个可以直接丢head里面，js也可以丢head，当然你也可以丢body的底部。

使用

<div id="box">
    <p>ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。</p>
    <p>ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。</p>
</div>

#box {
    height: 100px;
}

new SimpleBar(document.getElementById('box'));

这样就行了，在body后面我们通过new出来这个构造函数就可以了，css部分我们只需要固定一个高度就行了。其他都不用设置

属性激活

出了js激活我们还可以通过属性激活

<div id="box" data-simplebar>
    <p>ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。</p>
    <p>ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。</p>
</div>

这样就行了。

配置

经过我的测试，js激活，能使用的配置只有autoHide

new SimpleBar(document.getElementById('box'),{
  autoHide:true,
});

滚动条默认是隐藏的，只有当鼠标悬浮在元素上面才显示，我们可以设置默认不隐藏

属性设置

<div id="box" data-simplebar data-simplebar-auto-hide="false">
    ...
</div>

这样也行。

当然还有一个设置滚动条位置，这个也只能属性设置

<div id="box" data-simplebar data-simplebar-auto-hide="false" data-simplebar-direction="rtl">
    ...
</div>

默认是ltr也即是右边滚动条，rtl就是左边。

这些属性设置，单单只使用js激活也是可以生效的。

滚动条颜色

.simplebar-scrollbar::before {
    background-color: red;
}

自己设置这个伪元素的css即可，默认还有透明度，可以自行调整