参数

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 视频录制 java.lang.RuntimeException: start failed.

    //mRecorder.setVideoSize(320, 280); // mRecorder.setVideoFrameRate(5); mRecorder.setOutputFile(viodF ...

  2. git处理时的问题

    1. 在node.js开发的时候常常会遇到从别人的远程仓库中clone时出现文件名过长的错误, 或则是在本地npm下载之后的文件进行上传到自己的远程仓库的时候会出现 File too long的情况, ...

  3. mac下只遍历目录不遍历文件

    install brew install tree 命令 tree -d

  4. js之数组知识

    一.数组的定义(来源于Array.prototype) 1.构造函数方法: (1)var arr = new Array();//没有参数等价于 var arr = []; (2)var arr = ...

  5. Hanoi双塔问题

    题目描述: 给定A.B.C三根足够长的细柱,在A柱上放有2n个中间有孔的圆盘,共有n个不同的尺寸,每个尺寸都有两个相同的圆盘,注意这两个圆盘是不加区分的(下图为n=3的情形).现要将这些圆盘移到C柱上 ...

  6. MySQL中日期函数的使用

    1. MySQL中日期函数的使用 1.1. 转DATETIME类型为Date类型 将add_time ::56转化为date类型 select * from product where Date(ad ...

  7. 【DB_MySQL】查询语句中各子句的执行顺序

    1. FROM 指明查询来源 2. WHERE筛选元组 3. GROUP BY进行分组 4. HAVING 筛选分组 5. SELECT 投影出指定的字段列 6. ORDER BY 对结果集排序 7. ...

  8. Linux基础学习系列目录导航

    Linux基础学习-通过VM安装RHEL7.4 Linux基础学习-命令行与图形界面切换 Linux基础学习-基本命令 Linux基础学习-RHEL7.4之YUM更换CentOS源 Linux基础学习 ...

  9. 蓝牙学习 (8）配对raspberryPi和SensorTag CC2650

    在上一篇中,用raspberryPi能够扫描到Ti SensorTag. 但是没有获得更多的数据,并且发现sensor Tag并没有回复scan request. https://blog.csdn. ...

  10. 浏览器中如何获取想要的offsetwidth、、、clientwidth、、offsetheight、、、clientheight。。。

    clientWidth是对象看到的宽度(不含边线,即border)scrollWidth是对象实际内容的宽度(若无padding,那就是边框之间距离,如有padding,就是左padding和右pad ...