如何正确使用jquery滚动条插件slimscroll?方法示例

发布时间:2020-04-17编辑:脚本学堂
有关jquery滚动条特效插件slimscroll的用法,在jquery中美化滚动条样式,可以借助slimscroll插件轻松实现,这里分享一个例子。

jquery/scrollbar/ target=_blank class=infotextkey>jquery滚动条插件slimscroll用法

如何对滚动条进行美化,推荐一款功能强大的滚动条插件jQuery slimScroll,不仅可以定义高度、宽度,还可以定义位置、滚动条大小、尺寸、颜色以及众多参数自定义。

jquery滚动条特效插件jquery slimscroll

使用方法:

1、加载jQuery以及滚动条插件slimscroll
 

复制代码 代码示例:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="libs/jquery.slimscroll.min.js"></script>

2、调用函数(jquery滚动条插件slimscroll中函数
 

复制代码 代码示例:
$('#slimtest3').slimScroll({
    color: '#00f',
    size: '10px',
    height: '180px',
    alwaysVisible: true
});

3、html部分
 

复制代码 代码示例:
<div class="some-content-related-div">
<div id="inner-content-div">
<p>这里是文字滚动内容 .... </p>
</div>
</div>