参数

width: 'auto', //可滚动区域宽度

        height: '100%', //可滚动区域高度
        size: '10px', //组件宽度
        color: '#000', //滚动条颜色
        position: 'right', //组件位置：left/right
        distance: '0px', //组件与侧边之间的距离
        start: 'top', //默认滚动位置：top/bottom
        opacity: .4, //滚动条透明度
        alwaysVisible: true, //是否 始终显示组件
        disableFadeOut: false, //是否 鼠标经过可滚动区域时显示组件，离开时隐藏组件
        railVisible: true, //是否 显示轨道
        railColor: '#333', //轨道颜色
        railOpacity: .2, //轨道透明度
        railDraggable: true, //是否 滚动条可拖动
        railClass: 'slimScrollRail', //轨道div类名 
        barClass: 'slimScrollBar', //滚动条div类名
        wrapperClass: 'slimScrollDiv', //外包div类名
        allowPageScroll: true, //是否 使用滚轮到达顶端/底端时，滚动窗口
        wheelStep: 20, //滚轮滚动量
        touchScrollStep: 200, //滚动量当用户使用手势
        borderRadius: '7px', //滚动条圆角
        railBorderRadius: '7px' //轨道圆角
 
DEMO
 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.slimscroll.min.js"></script>
<style>
.demo{
max-height: 200px;
width: 100px;
border: 1px solid #008080;
margin:0px auto;
margin-top: 50px;
/*overflow: hidden;*/
}
.li{
list-style: none;
height: 50px;
width: 80px;
margin: 10px auto;
}
.bg-006600{
background: #006600;
}
.bg-006633{
background: #006633;
}
.bg-006666{
background: #006666;
}
</style>
</head>
<body>
<div class="demo">
<div id="demo">
<ul style="margin: 0;padding: 0;">
<li class="li bg-006600"></li>
<li class="li bg-006633"></li>
<li class="li bg-006666"></li>
<li class="li bg-006600"></li>
<li class="li bg-006633"></li>
<li class="li bg-006666"></li>
<li class="li bg-006600"></li>
<li class="li bg-006633"></li>
<li class="li bg-006666"></li>
</ul>
</div>
</div>
<script>
function setScroll(){
$("#demo").slimScroll({
width: 'auto',
height: 'auto',
start: 'bottom', //默认滚动位置：top/bottom
borderRadius: '0px', //滚动条圆角
railBorderRadius: '0px',//轨道圆角
disableFadeOut: false, //是否 鼠标经过可滚动区域时显示组件，离开时隐藏组件
alwaysVisible: true, //是否 始终显示组件
});
}
setScroll();
//$(window).on("resize",setScroll);
</script>
</body>
</html>

jquery滚动条插件slimScroll的更多相关文章

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

    jquery.slimscroll.js插件是一个支持把内容放在一个盒子里面,固定一个高度,超出的则使用滚动.jquery.slimscroll.js不仅可以定义高度.宽度,还可以定义位置.滚动条大小 ...

  2. Perfect Scrollbar – 完美的 jQuery 滚动条插件

    Perfect Scrollbar 是一个很小的,但完美的 jQuery 滚动插件.滚动条不会影响原来的设计布局,滚动条的设计是完全可定制的.你可以改变几乎所有的 CSS 样式的滚动条,滚动条设计对脚 ...

  3. 11 个最佳 jQuery 滚动条插件

    通过jQuery滚动条插件,你可以换掉千篇一律的默认浏览器滚动条,让你的网站或web项目更具特色,更有吸引力.本文收集了11款非常漂亮.实用的jQuery滚动条插件,你可以轻松将它们应用在自己的网站中 ...

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

    通过jQuery滚动条插件,你可以换掉千篇一律的默认浏览器滚动条,让你的网站或web项目更具特色,更有吸引力.本文收集了11款非常漂亮.实用的jQuery滚动条插件,你可以轻松将它们应用在自己的网站中 ...

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

    1.NiceScroll:可用于桌面.移动与触摸设备的jQuery滚动插件 NiceScroll是一个jQuery插件(since 1.5),它有着类似于ios/移动设备的样式.它支持Div.iFra ...

  6. jquery滚动条插件nanoscroller的应用

    默认的滚动条的样式,各个版本的兼容性不是很好, 推荐一款jQuery 插件nanoscroller ,可以自定义滚动条的样式. 应用: 1.引入样式 nanoscroller.css <link ...

  7. jquery——滚动条插件jscroll.js

    一.效果如下 点击“测试中奖纪录”弹出弹框.弹框中内容超出时显示滚动条. 二.代码部分 1.html结构 <body> <a href="javascript:;" ...

  8. JQuery 滚动条插件perfect-scrollbar

    原文地址 https://github.com/noraesae/perfect-scrollbar perfect-scrollbar Tiny but perfect jQuery scrollb ...

  9. jquery 滚动条插件 jquery.nanoscroller.js

    $(".listcontent .nano").nanoScroller();   $(".chatcontent .nano").nanoScroller({ ...

随机推荐

  1. Android 实现类似于QQ空间相册的点击图片放大，再点后缩小回原来位置

    前几天看到了有人在android5.0上实现了如下图一样的效果,我自己就去搜了下.参考了国外一篇文章和国内的一篇文章,最终实现了想要的效果.具体参考的网址我已经贴到文章末尾,大家可以去英文的那个网站看 ...

  2. win7 x64和win10 x64 windbg 本地调试记录

    今天看CSDN和某文档看了win7 64位 和win10 64位 的windbg本地调试内核的办法 win7 x64 Step1:kdbgctrl –db Step2:kdbgctrl –e Step ...

  3. Mysql 主备配置

    来自:http://blog.csdn.net/u013256816/article/details/52536283 1. 了解主备配置过程原理. http://blog.csdn.net/u013 ...

  4. OpenGL列主元矩阵和列主序存储

    OpenGL矩阵要考虑两个点,一个是向量如何排布,一个是矩阵如何存储和恢复. 1.排布 排布决定了运算的顺序.OpenGL使用的是列主元,它的意思就是一个4X4的矩阵是由4个列向量构成(这里的v1,v ...

  5. 机器学习之-奇异值分解(SVD)原理详解及推导

    转载 http://blog.csdn.net/zhongkejingwang/article/details/43053513 在网上看到有很多文章介绍SVD的,讲的也都不错,但是感觉还是有需要补充 ...

  6. Sublime 设置移动光标快捷键

    发现问题 在使用Sublime和其他编辑器一个很不爽的问题是:在输入一个函数或者有左右的符号或者在引号内时,总是要跳出来,无奈方向键又在主键盘的另一边,只能不断的切换,太特么操蛋,就不能让手指不离开主 ...

  7. Socket通讯简易学习

    Socket打开通信通道,告诉本地机器,愿意在该通道上接受客户请求——监听,等待客户请求——接受请求,创建专用链接进行读写——处理完毕,关闭专用链接——关闭通信通道(当然其中监听到关闭专用链接可以重复 ...

  8. 新版raspbian系统的固定IP配置和启用root账户的ssh登录功能的方法

    1. 2016新版raspbian系统的固定IP配置: 自2016年2月份新版raspbian系统发布以后,树莓派的固定IP配置方法就与之前不一样了. 之前在raspbian系统中编辑/etc/net ...

  9. 快学UiAutomator UiDevice API 详解

    一.按键使用 返回值 方法名 说明 boolean pressBack() 模拟短按返回back键 boolean pressDPadCenter() 模拟按轨迹球中点按键 boolean press ...

  10. shell脚本，计算从0+2+4+6+....100的结果是多少？

    [root@localhost wyb]# cat evenjia.sh #!/bin/bash #从0++++...100的结果 i= ` do sum=$(($sum+i)) i=$(($i+)) ...