slimscroll插件使用

在开发微信聚合平台的时候,需要给公告的div设置个滚轮,防止太大,影响下面元素,各种找插件最后找到slimscroll这个插件,使用起来非常方便,记录下,方便以后查找。

CDN链接,自行下载

0x01 引入插件

1
<script src="{{ url_for('static', filename='common/jquery.slimscroll.min.js') }}"></script>

指定内容

指定id="box"的div设置滚动

1
<div class="layui-card-body1" id="box" style="height: 100px">
2
    {{ announcement.context|safe }}
3
</div>

绑定元素

1
$(function () {
2
    $('#box').slimScroll({
3
        height: '100', //容器高度
4
        size: "6px", //滚动条宽度
5
        color: "#009688", //滚动条颜色,默认#000000
6
        alwaysVisible: true, //是否禁用隐藏滚动条,默认false
7
        opacity: 4,  // 滚动条透明度
8
    })
9
})