• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

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

26
  • 本文分类:JavaScript教程
  • 本文标签:暂无标签
  • 流行热度:已超过 294 人围观了本文
  • 最后更新:2020年09月11日 - 3时29分52秒
  • 发布日期:2020年09月11日 - 3时29分52秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
微信收款码
微信收款码