特效介绍
jquery.slimscroll.js jQuery滚动条插件
我们经常遇到需要美化滚动条的需求,可是,各浏览器对滚动条的样式支持不统一,没办法修改滚动条的样式达到统一效果。
jquery.slimscroll.js插件是一个支持把内容放在一个盒子里面,固定一个高度,超出的则使用滚动。jquery.slimscroll.js不仅可以定义高度、宽度,还可以定义位置、滚动条大小、尺寸、颜色以及众多参数自定义,非常不错,推荐大家使用。
使用方法
1、在head引入jquery和jquery.slimscroll.js
<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="jquery.slimscroll.min.js"></script>2、调用代码:
$(function(){ $('#inner-content-div').slimScroll({ width: '250px' }); });这里的ID,就是您需要使用自定义滚动条的容器。
参数说明:
$(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 });