插件五之滚动条jquery.slimscroll.js

前言

slimscroll.js用于模拟传统的浏览器滚动条(竖向),原理为原内容内置于一个仅可视区域显示层,使用2个div层用于模拟滚动条和滚动条背景轨道监听滚动条div高度变化来控制内容层位置(猜测),可自定义滚动条颜色,其轨迹(背景颜色),宽度,位置,滚动阀值,与容器的padding值等~使用中依赖于jquery库.

<script type="text/javascript" src="qingyu/js/jquery.min.js"></script>
<script type="text/javascript" src="qingyu/js/jquery.slimscroll.min.js"></script>

实例化参数说明

$('.qingyu').slimScroll({width:'100px'})width:'100px',//容器宽度,默认无
height:'100px',//容器高度,默认250px
size:'10px',//滚动条宽度,默认7px
position:'left',//滚动条位置,可选值:left,right,默认right
color:'#abc',//滚动条颜色,默认#000000
alwaysVisible:true,//是否禁用隐藏滚动条,默认false
distance:'10px,'//距离边框距离,位置由position参数决定,默认1px
start:'.p',//滚动条初始位置,可选值top,bottom,$(selector)--内容元素位置,默认top
wheelStep:'12px',滚动条滚动值,默认10px
railVisible:true,//滚动条背景轨迹,默认false
railColor:'#005612',//滚动条背景轨迹颜色,默认#333333
railOpacity:0.8,//滚动条背景轨迹透明度,默认0.2
allowPageScroll:true,//滚动条滚动到顶部或底部时是否允许页面滚动,默认false
scrollTo:'50px',//跳转到指定的滚动值。可以呼吁任何元素slimScroll已经启用了吗(没试过)
scrollBy:'50px'增加/减少当前滚动值由指定的数量(正面或负面)。可以呼吁任何元素slimScroll已经启用(没试过)
disableFadeOut:true,//是否禁用鼠标在内容处一定时间不动隐藏滚动条,当设置alwaysVisible为true时该参数无效,默认false
touchScrollStep:1000,//可以设置不同的触摸滚动事件的敏感性。负数反转方向滚动,默认200

其他

官方参考:http://plugins.jquery.com/slimScroll/

http://danqingyu.com/152.html

http://rocha.la/jQuery-slimScroll/

转载于:https://www.cnblogs.com/chen110xi/p/4585148.html

插件五之滚动条jquery.slimscroll.js相关推荐

针对模拟滚动条插件(jQuery.slimscroll.js)的修改
在开发过程中程序员总会碰到产品经理提出的各种稀奇古怪的需求,尽管有些需求很奇葩,但不得不说有些须有还是能指引我们不断的学习与进步,最近在工作中就碰到这种问题.需求是要求在各主流浏览器上使用自定义的滚动 ...
mysql w3scoll_jQuery滚动条插件 – jquery.slimscroll.js
jquery.slimscroll.js插件是一个支持把内容放在一个盒子里面,固定一个高度,超出的则使用滚动. jquery.slimscroll.js不仅可以定义高度.宽度,还可以定义位置.滚动条大 ...
一个很好的滚动条插件jquery.slimscroll.js
该插件的下载地址: https://codeload.github.com/rochal/jQuery-slimScroll/zip/v1.3.0 安装Set up 首先需要引入jquery 在次需要 ...
jquery.slimscroll.js 插件库的应用
调用 <script src="js/jquery.slimscroll.js"></script> 滚动条样式设置 $(".text" ...
jQuery插件之Cooki（jquery.cookie.js）
一.jQuery.Cookie.js插件是一个轻量级的Cookie管理插件. 特别提醒,今日发现一个特别的错误,google浏览器提示:has no method $.cookie.火狐浏览器提示:$ ...
jQuery 插件取url参数[jquery.url.js]的使用以及文件下载
方法一. 如题,直接上调用代码: jQuery.url.param("c") "c"就是当前url中的参数,记得要引用jquery.js和jquery.url. ...
图片点击放大并可点击旋转插件（1）-jquery.artZoom.js
1.首先加入链接: <script type="text/javascript" src="js/jquery-1.6.1.min.js">< ...
jquery.slimscroll.js兼容firefox和动态高度计算
//解决了两个问题: //1.当页面只有一屏时,动态增加menu子节点,展开树状结构时,动态计算树的高度,不然第一次滚动时会出现滚动很多的情况 //解决方法:在338行,增加动态计算高度 getB ...
基于jquery类库的绘制二维码的插件jquery.qrcode.js
jquery.qrcode.min.js 如下 (function(r){r.fn.qrcode=function(h){var s;function u(a){this.mode=s;this.d ...

插件五之滚动条jquery.slimscroll.js

前言

实例化参数说明

其他

插件五之滚动条jquery.slimscroll.js相关推荐

最新文章

热门文章