登录注册

jQuery自定义滚动条（原创）

插件特效
2026-07-25 23:19 2 次浏览 • 0 次下载 6.6KB
jQuery自定义滚动条（原创）

更新时间：2021-03-11 09:16:14

更新说明：插件可支持ie9以上浏览器，之前demo.html演示文件不能使用是因为demo.html中使用了es6的模板字符串所导致的；另外修复了同时存在多个滚动条时，滚轮事件有冲突的bug;修复了同时存在多个滚动条时，键盘方向键事件有冲突的bug,目前只允许存在一个键盘方向事件，若同时存在多个事件，则只有第一个会生效；最后更新一下使用方法；

使用方法：

1、需要文件:

  • js--jquery.min.js,jquery.inputProgressBar.min.js

  • css--jquery.smilebar.min.css

  • img--smilebarImg

2、引入:

1
2
3
<link rel="stylesheet" href="css/jquery.smilebar.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.smilebar.min.js"></script>

3、使用:

1
2
3
$("#Ele").smilebar({
handBle:true
});

4、注意：

1）"#Ele",各选择器尽量用id选择器,确保唯一性

2）该元素宽高必须为固定宽高；

3）当该元素宽高会动态改变时， 需要在改变的时候调用update() 方法；

4）若需要动态添加内容， 需要添加到$("Ele>smilerbar-content") 内；

5、配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 默认配置 */
var config = {
type: "xy", //类型 //x:水平 y:垂直 除"x"和"y":水平垂直
size: "12px", //滚动条大小
color: "#252a35", //滚动条颜色
silderSize: "60%", //滑块大小 范围[20%-100%]
silderColor: "#404550", //滑块颜色
clickBln: true, //点击开关 //其他激活方法：实例加上字段:data-click="true"
keyBln: true, //键盘开关 //其他激活方法：实例加上字段:data-key="true"
keySpeed: 1, //键盘移动速率 范围(0-100]
wheelBln: true, //滚轮开关 //其他激活方法：实例加上字段:data-wheel="true"
wheelSpeed: 1, //键盘移动速率 范围(0-100]
handBln: false, //抓手功能开关 //其他激活方法：实例加上字段:data-hand="true"
handSpeed: 30, //抓手速率 范围(0-100]
initPosition: { //初始移动位置
x: 0, //x轴 三种写法：1:number(px单位) 2:string("%"单位)
y: 0 //y轴 3:string ("first":顶端 "center"：中间 "last":末尾)
},
};


更新时间：2021-03-10 00:18:25

使用方法

所需文件 css--jquery.smilebar.min.css js--jquery.min.js，jquery.smilebar.min.js img--smilebarImg

抓手图引入

1
<link rel="stylesheet" href="css/jquery.smilebar.min.css" />

使用

1
2
3
4
$.("Ele").smilebar({
type: "y",
handBln: true
});

Ele-- > 需要使用滚动条的元素选择器

注意：

  • 该元素宽高必须为固定宽高；

  • 当该元素宽高会动态改变时， 需要在改变的时候调用update() 方法；

  • 若需要动态添加内容， 需要添加到$("Ele>smilerbar-content") 内；

配置config:

  • type:类型 * 默认 "xy" //x:水平 y:垂直 除"x"和"y":水平垂直 *

  • size:滚动条大小 * 默认12px *

  • color:滚动条颜色 * 默认#252a35 *

  • silderSize:滑块大小 * 默认60% 范围[20%-100%] *

  • silderColor:滑块颜色 * 默认#404550 *

  • clickBln:点击开关 * 默认true //其他激活方法：实例加上字段:data-click="true" *

  • keyBln:键盘开关 * 默认true //其他激活方法：实例加上字段:data-key="true" *

  • keySpeed:键盘移动速率 * 默认 1 范围[0-100] *

  • wheelBln:滚轮开关 * 默认true //其他激活方法：实例加上字段:data-wheel="true" *

  • wheelSpeed:键盘移动速率 * 默认 1 范围[0-100] *

  • handBln:抓手功能开关 * 默认false //其他激活方法：实例加上字段:data-hand="true" *

  • handSpeed:抓手速率 * 默认 30 范围[0-100] *

  • initPosition：初始移动位置 * 默认{x:0,y:0} //{三种写法：1:number(px单位) 2：string("%"单位) 3：string ("first":顶端 "center"：中间 "last":末尾)

评论