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

所属分类:UI-滚动

自定义滚动条插件(原创) ie兼容9

更新时间: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方法,来重新计算高度。

相关插件-滚动

视觉滚动差效果

纯css3写的滚动视差效果
  滚动
 6810  38

css3页面鼠标纵向滑动效果

css3页面鼠标纵向滑动效果
  滚动
 30044  156

新闻向下翻滚更新

新闻向下翻滚更新
  滚动
 11607  130

自定义滚动条

自定义滚动条,实现滚轮滚动内容
  滚动
 24099  113

讨论这个项目(22)回答他人问题或分享插件使用方法奖励jQ币

    ha321456 0
    2018/5/15 11:33:32
    配合 vue 怎么就是不行的 貌似所有事件都无法触发了 ,查看代码有结构就是鼠标移入没反应 回复
       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
    2018/3/2 16:25:01
    你这个很好,很强大,给你点,如果是锚点跳转,用这个滚动条是否会滚动到相对应的位置
        英雄本色0
        2018/3/2 16:26:52
        为什么点赞的颜文字出不来呢
    回复
    英雄本色 0
    2018/3/2 16:21:16
    希望可以设置滚动条的位置;不想让滚动条一直在右侧或下侧,也可在左侧或上侧,或是与右侧或下侧有一点间隔空隙
    回复
    麦祖 0
    2018/1/11 15:42:16

    滚动层 不设置高度 就不显示滚动条 这个情况有办法吗 也可能和页面其他js有冲突?

        静心若水1
        2018/1/11 22:10:09
        Y轴滚动条不用设置高度也可以显示滚动条呀。X轴滚动条需要设置宽度,因为滚动层的盒子不设置宽度,就是遮罩层的宽度。
        麦祖0
        2018/1/12 11:10:37

        用在选项卡下的列表滚动   我设置了高度 就显示 不设置 就不显示了 

        静心若水1
        2018/1/12 17:55:37

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

        静心若水0
        2018/1/12 17:56:48
        在该选项卡显示的时候调用一下setSize方法,应该可以
    回复
    麦祖 0
    2018/1/10 10:16:26

    可以设置 跳转到某个位置不 比如第几个P或者某个id的位置

        静心若水0
        2018/1/10 11:01:43

        暂时没有,我弄好了,更新。

        静心若水0
        2018/1/10 19:36:07

        好了,这个功能添加上了,先在在审核。

        areyouOk0
        2018/1/10 21:05:54

        非常好,作者辛苦啦。

        麦祖0
        2018/1/11 12:37:11

        棒!辛苦辛苦

        麦祖0
        2018/1/11 16:53:53

        可以直接打开就自动滚动要某个id位置吗 似乎现在这个 只能有点击等动作才行

        静心若水1
        2018/1/11 22:13:49
        现在没有打开的默认位置设置,可以在初始化后执行MyScrollbar.jump()跳过去,不设置time。
    回复
    静心若水 0
    2018/1/2 11:28:46

    包裹层有padding时候的问题修改了,可能还需要审核一段时间。

    回复
    静心若水 0
    2018/1/2 11:24:27

    有什么问题,请大家指正,我会努力更新的!

    回复
取消回复