参数

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. ycsb安装和使用介绍

    nosql性能测试工具ycsb0.1的使用 使用文档参考地址:https://www.cnblogs.com/SailorXiao/p/5808828.html ycsb地址:https://gith ...

  2. Android学习总结（六）———— 发送自定义广播

    一.两种广播类型 2.1 标准广播 是一种完全异步执行的广播,在广播发出去之后,所有的广播接收器几乎都会在同一时刻接收到这条广播消息,因此它们之间没有任何先后顺序可言.这种广播的效率会比较高,但同时也 ...

  3. （二）maven之项目结构

    我们可以看一下Maven项目的大致结构:      项目结构: src/main/java:java源代码文件目录. src/main/resources:资源库,会自动赋值到classes目录里,像 ...

  4. 一个具体的例子学习Java volatile关键字

    相信大多数Java程序员都学习过volatile这个关键字的用法.百度百科上对volatile的定义: volatile是一个类型修饰符(type specifier),被设计用来修饰被不同线程访问和 ...

  5. sublime text 3中emmet常用技巧

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. struts2默认拦截器defaultStack

    第一次使用Struts2.3.20,前台页面向后台传值,怎么总是提示值为null,查找半天原来是struts配置文件的action中忘记引入defaultStack拦截器了,所以即使Action中万事 ...

  7. eclipse 的project explorer问题，这个怎样把localFileSystem去掉，

    这个非常简单 把勾去掉就可以了

  8. python学习（day1）

    一.在这次实训之前,虽然听说过很多次python这种语言,但是从来没有真正去学习过,仅仅知道它是一种目前十分流行且功能非常强大的语言,可以方便快捷的实现很多功能.今天的课程带我了解了python,并且 ...

  9. Luogu P5352 Terrible Homework

    神仙@TheLostWeak出的题,因为他最近没时间所以我先写一下sol(其实我也没什么时间) 作为一道简单的数据结构题想必大家都能看出必须用LCT维护信息吧 一个朴素的想法就是直接维护四种操作的值, ...

  10. c#写出乘法口诀

    显然是显得无聊五分钟写的乘法口诀 static void Main(string[] args)        {            int dq;            int[] array ...