jQuery滚动条插件 – jquery.slimscroll.js

2015-09-16阅读(10178)评论(0)牵着狗狗看MM

苏州实时公交查询

jquery.slimscroll.js插件是一个支持把内容放在一个盒子里面,固定一个高度,超出的则使用滚动。
jquery.slimscroll.js不仅可以定义高度、宽度,还可以定义位置、滚动条大小、尺寸、颜色以及众多参数自定义,非常不错,推荐大家使用。

官网地址:https://github.com/kujian/jQuery-slimScroll
CND:http://cdn.bootcss.com/jQuery-slimScroll/1.3.6/jquery.slimscroll.min.js

使用方法:

引入jQuery & jquery.slimscroll.js

[html]<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>
[/html]

HTML

[html]
<div id="inner-content-div">
<p>www.w3cways.com(Web前端学习之路)www.w3cways.com(Web前端学习之路)www.w3cways.com(Web前端学习之路)www.w3cways.com(Web前端学习之路)www.w3cways.com(Web前端学习之路)www.w3cways.com(Web前端学习之路)www.w3cways.com(Web前端学习之路)www.w3cways.com(Web前端学习之路)www.w3cways.com(Web前端学习之路)www.w3cways.com(Web前端学习之路)www.w3cways.com(Web前端学习之路)www.w3cways.com(Web前端学习之路)www.w3cways.com(Web前端学习之路)www.w3cways.com(Web前端学习之路)www.w3cways.com(Web前端学习之路)</p>
</div>
[/html]

JS

[js]$(function(){
$(‘#inner-content-div’).slimScroll({
width: ‘250px’
});
});
[/js]

参数

[js]$(selector).slimScroll({
width: ‘300px’, //容器宽度,默认无
height: ‘500px’, //容器高度,默认250px
size: ’10px’, //滚动条宽度,默认7px
position: ‘left’, //滚动条位置,可选值:left,right,默认right
color: ‘#ffcc00′, //滚动条颜色,默认#000000
alwaysVisible: true, //是否禁用隐藏滚动条,默认false
distance: ’20px’, //距离边框距离,位置由position参数决定,默认1px
start: $(‘#child_image_element’), //滚动条初始位置,可选值top,bottom,$(selector)–内容元素位置,默认top
railVisible: true, //滚动条背景轨迹,默认false
railColor: ‘#222’, //滚动条背景轨迹颜色,默认#333333
railOpacity: 0.3, //滚动条背景轨迹透明度,默认0.2
wheelStep: 10, 滚动条滚动值,默认20
allowPageScroll: false, //滚动条滚动到顶部或底部时是否允许页面滚动,默认false
disableFadeOut: false //是否禁用鼠标在内容处一定时间不动隐藏滚动条,当设置alwaysVisible为true时该参数无效,默认false
});
[/js]

Demo

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » jQuery滚动条插件 – jquery.slimscroll.js
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏