木灵鱼儿

木灵鱼儿

阅读:2058

最后更新:2020/09/11/ 3:29:52

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即可,默认还有透明度,可以自行调整

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 28
文章被阅读 2058

相关文章