tScroll

Javascript滚动条插件2.0

支持纵向横向滚动拖动和各种自定义配置,思路基于jquery.tinyscrollbar.js

效果详见 Demo

Usage tScroll(selector, options)

调用方法,第一个参数可以参数元素本身、#id.class,第二个参数是配置项,可不传。如下:

var sb = tScroll('.demo'); .update(scroll)

使用过程中,由于主体内容变化导致高度或宽度改变,可以通过该方法重置滚动条。传入的参数为一个数值(单位px),也可以是字符串 'bottom'直接滚到底部,不传维持原有高度。如下:

sb.update(0); .moveTo(scroll)

该方法可以直接让滚动到指定位置,传入的参数为数值(单位px)。如下:

sb.moveTo(100); .setting(options)

如果开始的时候没有传入配置,中途也是可以重新改的,调用该方法后,还是必须重新调用 update() 方法才能使新配置生效。

var options = { axis: 'x', scroll: false }; sb.setting(options); sb.update(); .scroll/.wheel/.direction

滚动的长度/速度/属性(top/left),只提供访问,不允许修改。

sb.scroll

该版本的节点为自动生成,提供一套样式。

Options

插件提供可配置的选项,调用方法如下:

var options = { axis: 'x', scroll: false }; sb = tScroll('.demo', options); scroll:是否绑定滚轮事件,默认true wheel: 滚动速度,传入数值,默认40 axis: 滚动轴方向,可选 x 横轴或 y 纵轴,默认y trackSize: 滚动条高度,传入数值,默认auto thumbSize: 滚动条滑块高度,传入数值,膜auto thumbMinSize: 滚动条滑块最小高度,当thumbSizeauto生效,默认10 lockScroll: 是否锁定滚动事件,如果为true,滚动事件不传递给父级,默认为true invertScroll: 移动设备反转效果,默认为false onSelect: ie低版本下的兼容措施,bodyonselectstart由于有些情况可能需要用到这个属性,故给个配置选项可以取消插件对这个属性的操作,默认为true,指插件可以操作该属性 bounce: 是否启用超出反弹效果,多用于移动设备 callback: 滚动回调函数,传入第一个参数为自己 Author

Travis

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。