转载jquery 滚动条插件jquery.slimscroll.js

Posted 小敏子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了转载jquery 滚动条插件jquery.slimscroll.js相关的知识,希望对你有一定的参考价值。

转载http://www.w3cways.com/1910.html

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 

 

$(function(){
$(‘#inner-content-div‘).slimScroll({ 
    width: ‘250px‘ 
}); 
}); 

参数 

 $(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
 });

  

以上是关于转载jquery 滚动条插件jquery.slimscroll.js的主要内容,如果未能解决你的问题,请参考以下文章

jquery插件slimScroll有大神知道横向滚动条怎么设置出来吗

有没有可以隐藏滚动条的jquery插件

原创新闻 11 个最佳 jQuery 滚动条插件

15个带示例的jQuery滚动条插件

jquery滚动条纸插件如何使用?

通过 webpack 导入时,引导工具提示不适用于 jquery.slim