更新于

js 滚动条 simplebar 使用教程

发布于 / 分类: JavaScript,教程 / 暂无评论 / 阅读量: 64

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

暂无评论

Info
站点信息

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了327篇文章

共有550条评论

创建了21个分类目录

Archive
时间归档
Weather
天气

湿度
设置
配色方案

布局