参数

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. iOS Block的本质（一）

    iOS Block的本质(一) 1.对block有一个基本的认识 block本质上也是一个oc对象,他内部也有一个isa指针.block是封装了函数调用以及函数调用环境的OC对象. 2.探寻block ...

  2. 用YII实现多重查询(基于tag)

    场景: 有一个饭店表 restaurant,存放所有饭店记录.我需要一个功能,将饭店按照不同的条件进行多重查询.就象这样:   氛围:浪漫 / 商务会谈 / 茅草屋 菜系:川菜 / 鲁菜 / 家常菜. ...

  3. 利用基于@AspectJ的AOP实现权限控制

    一. AOP与@AspectJ AOP 是 Aspect Oriented Programming 的缩写,意思是面向方面的编程.我们在系统开发中可以提取出很多共性的东西作为一个 Aspect,可以理 ...

  4. 如何通过Xcode 5中集成的XCTest框架进行简单的单元测试

    XCTest 1.第一个单元测试 XCTest是Xcode 5中自带的测试框架 下面从一个Demo开始.首先用Xcode新建一个工程UnitTestDemo,工程目录结构如下: 可以看到工程下面多了一 ...

  5. vue+element ui项目总结点（三）富文本编辑器 vue-wangeditor

    1.参考 https://www.npmjs.com/package/vue-wangeditor 使用该富文本编辑器 <template> <div class="egi ...

  6. NBUT 1119 Patchouli's Books （STL应用）

    题意: 输入一个序列,每个数字小于16,序列元素个数小于9. 要求将这个序列所有可能出现的顺序输出,而且要字典序. 思路: 先排序,输出该升序序列,再用next_permutation进行转变即可,它 ...

  7. 验证 .NET 4.6 的 SIMD 硬件加速支持的重要性

    SIMD 的意思是 Single Instruction Multiple Data.顾名思义,一个指令可以处理多个数据. .NET Framework 4.6 推出的 Nuget 程序包 Syste ...

  8. Xamarin.IOS binding库编译失败的解决办法

    报错:目标框架 Xamarin.iOS,Version=v1.0 未找到 复制 C:\Program Files (x86)\Microsoft Visual Studio\2017\Professi ...

  9. Maven添加本地依赖

    在写本文的时候先来说明一下maven依赖的各种范围的意思 compile(编译范围)       compile 是默认的范围:如果没有提供一个范围,那该依赖的范围就是编译范围.编译范围依赖在所有的c ...

  10. 优化SQL语句的方法

    首先,对于where语句的注意事项: 1.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索引而进行全表扫描,如:select id from t where nu ...