自定义滚动条插件(原创)

所属分类:UI-滚动

 37481  382  查看评论 (32)
分享到微信朋友圈
X
自定义滚动条插件(原创) ie兼容9

更新时间:2018/11/19 下午10:22:26

更新说明:

1、添加滚动动画参数time、默认为0,参考设置为100

var oMyBar4 = new MyScrollBar({
    selId: 'wrapper4',
    time: 100
})

2、 修改my_scrollbar可以动态添加数据, 可以通过max - height显示滚动条

var oMyBar5 = new MyScrollBar({
    selId: 'wrapper5'
}) oAddScroll5Btn.onclick = function() {
    var oP = document.createElement('p');
    oP.innerHTML = 'abcdefg';
    oScrollBox5.appendChild(oP); // 重要点 
    oMyBar5.setSize();
}
oDelScroll5Btn.onclick = function() {
    var oP = oScrollBox5.lastElementChild;
    oScrollBox5.removeChild(oP); // 重要点 
    oMyBar5.setSize();
}

更新时间:2018/1/12 下午5:52:55

更新说明:修改removeClass函数


更新时间:2018/1/10 下午7:28:07

更新说明:添加方法:jump()参数是一个对象

作用:跳到指定位置

o.id -> 要跳到那个id的位置;

o.pos -> 要跳到那个具体的位置,如果为字符串(两个选中择'top','bottom','left','right'),如果为对象({top: number, left: number}),为对象时如果要Y轴滚动条滚动就设置top,要两个轴一起滚动才一起设置。

o.time -> 滚动动画时间,不设置为没有动画

注:如果id存在,则pos不生效

如:

1、要跳到顶部

oBtn3.onclick = function () {
	oMyBar1.jump({
		pos: 'top',
		time: 400
	})
}

2、跳到id为p14的节点位置

oBtn2.onclick = function () {
	oMyBar1.jump({
		id: 'p14',
		time: 400
	})
}

3、跳到距离顶部500位置

oBtn5.onclick = function () {
	oMyBar1.jump({
		pos: {
			top: 200
		},
		time: 400
	})
}

更新时间:2018/1/9 下午5:01:46

更新说明:添加配置enterColor,在鼠标移上滚动条时滚动条变色,在鼠标移出并抬起的时候恢复原来的颜色,不设置的时候,鼠标移上不变色。


更新时间:2018/1/2 上午11:15:32

更新说明:

1. 解决包裹层有padding时导致的滚不完的问题;

2. 添加了borderRadius参数设置滚动条的圆角,默认是width参数的一半,不要圆角设置broderRadius:0;


更新时间:2017/12/28 上午11:33:23

更新说明:由于获取内容高度+padding时候减去了,border高度,造成了,当包裹层的祖先元素是隐藏时滚动条创建实例对象,而让包裹层高度不正确。以及当包裹层的祖先元素是隐藏时,包裹层、滚动层宽高得0时,初始化不创建滚动条的问题。


使用方法

如果需要使用这个插件。

1、dom结构需要有一个包裹层和一个滚动层,如下。包裹层是id="wrapper1"的div(必须有id),滚动层是id="scrollOne"的div(不必须有)。

<div class='box' id='wrapper1'>
    <div class="scroll" id="scrollOne">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
    </div>
</div>

2、包裹层如果Y轴需要滚动条,则包裹层Y轴需要固定的高度,并Y轴overflow-y:hidden;同理:X轴也一样。

/*x轴需要滚动条包裹层就要设置固定宽度,并在x方向overflow:hidden;y轴同理*/
.box {
    width: 600px; height: 300px; border: 1px solid #444; margin: 10px auto; padding: 0; overflow: hidden;
}

3、引入my_scrollbar.js文件

4、通过构造函数创建实例,只有selId是必须有的配置参数

var oMyBar1 = new MyScrollBar({
    selId: 'wrapper1'
});

5、创建实例后就有滚动条了

6、所有的配置参数

    selId -> 滚动内容盒子的id (必须)

    width -> 滚动条的宽度 (默认10,请设置为偶数)

    bgColor -> 滚动条包裹层的颜色 (默认#eaeaea)

    barColor -> 滚动条的颜色 (默认#ccc)

    enterShow -> 是否为鼠标进入包裹层后显示滚动条 (默认true是)

    hasY -> 是否需要Y轴滚动条(默认true需要)

    hasX -> 是否需要X轴滚动条(默认false不需要)

7、如果在创建了实例之后需要改变滚动层之中的数据的话,改变之后调用一下,setSize方法,重置一下滚动条高度

oBtn.onclick = function () {
    var oP = document.createElement("p");
    oP.innerHTML = '123123123';
    oScroll.appendChild(oP);

    oMyBar1.setSize();
}

8、注意:如果滚动盒子的祖先元素在创建实例的时候是display:none隐藏的话,那这时候滚动条的高度是0,所以在其显示之后要调用一次setSize方法,来重新计算高度。

相关插件-滚动

jQuery简单的文字跑马灯特效

这是一款非常简单的jQuery文字跑马灯特效插件。该跑马灯特效使文本从右向左不停循环,当鼠标放到跑马灯上的文字时,跑马灯会暂停运动。
  滚动
 213782  358

仿淘宝、京东等电商网站楼层跳转滚动定位

实现电商网站的滚动监听、导航定位、返回顶部的功能
  滚动
 29701  410

苹果applewatch界面

苹果applewatch界面
  滚动
 27881  339

jQuery上下左右滚动插件rollSlide.js

实现上下左右自动滚动、无缝滚动
  滚动
 69180  559

讨论这个项目(32)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    晓风残月?? 0
    2019/10/9 18:28:26
    此插件有无嵌套滚动方案? 回复
    灰色的世界 0
    2019/6/5 14:49:38
    打开横向滚动,为什么页面首次加载时不是显示最左边的数据, 回复
    ZLOTAKU 0
    2019/5/24 16:00:41
    为什么打开了横向后,初始化出来会跳到最后面的内容 回复
    莫天 0
    2019/4/9 14:18:52
    height : 100% 改变窗口大小 调用 setSize() 内容显示不全。 有遇到这样的情况吗 回复
    ?? 0
    2019/2/23 11:34:43
    滚动条滚动到底部,异步加载数据如何弄? 回复
    Aurore 0
    2018/9/29 17:48:37
    移动端是不是不支持 啊? pc试的没有问题,到手机上就不行了 回复
    Hi! 韶年 0
    2018/8/3 15:47:36
    目前id必须是滚动盒子的直属子集吗,中间有盒子隔着貌似就报错了
        静心若水0
        2018/11/20 9:13:29
        滚动内容,需要是包裹盒子的第一个子元素
    回复
    ha321456 0
    2018/5/15 11:33:32
    配合 vue 怎么就是不行的 貌似所有事件都无法触发了 ,查看代码有结构就是鼠标移入没反应
        静心若水0
        2018/11/19 14:50:56

        在mounted事件中创建对象就可以使用。

        mounted () {
            var oMyBar1 = new MyScrollBar({
                selId: 'wrapper1',
                bgColor: 'rgba(50, 50, 50, 0.2)',
                barColor: '#2E8EEA',
                enterColor: '#056FD8',
                enterShow: false,
                borderRadius: 2,
            });
        }
    回复
       EFG  0
    2018/3/12 14:48:52
    ajax加载内容的时候,setSize没有用
           EFG 0
        2018/3/12 14:55:02
        var oMyBar1 = new MyScrollBar({
            selId: "wrapper1",
            width: "5",
            barColor: "#595959",
            bgColor: "#202020",
        });
        $("#select-year-list li").on("click", function() {
            $.ajax({
                url: 'test.html',
                type: 'GET',
                async: true,
                data: '',
                timeout: 5000,
                dataType: 'html',
                beforeSend: function() {},
                success: function(data) {
                    $("#varietylist").html(data);
                    oMyBar1.setSize();
                },
                error: function() {
                    alert("载入失败,请刷新页面重试!");
                }
            });
        })
           EFG 0
        2018/3/12 14:57:14
        如果div内容默认空,ajax载入内容进来后 执行 setSize() 不显示滚动条
        areyouOk0
        2018/3/12 15:26:28
        把插件放到一个function aa(){...} 中 ,ajax后要在运行一下aa();因该就可以了。
        巷°0
        2019/9/16 15:33:31
        不知道这个问题解决了吗
    回复
    英雄本色 0
    2018/3/2 16:25:01
    你这个很好,很强大,给你点,如果是锚点跳转,用这个滚动条是否会滚动到相对应的位置
        英雄本色0
        2018/3/2 16:26:52
        为什么点赞的颜文字出不来呢
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复