jQuery自定义滚动条（原创）

所属分类：UI-滚动

6200 42 查看评论 (1)

分享到微信朋友圈

查看演示立即下载

插件描述：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、引入:

<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、使用:

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

4、注意：

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

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

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

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

5、配置:

/* 默认配置 */
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

抓手图引入

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

使用

$.("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":末尾)