登录注册

自定义滚动条插件（原创）

插件特效
2026-07-25 22:32 3 次浏览 • 0 次下载 7.6KB
自定义滚动条插件（原创）

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

更新说明：

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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、要跳到顶部

1
2
3
4
5
6
oBtn3.onclick = function () {
oMyBar1.jump({
pos: 'top',
time: 400
})
}

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

1
2
3
4
5
6
oBtn2.onclick = function () {
oMyBar1.jump({
id: 'p14',
time: 400
})
}

3、跳到距离顶部500位置

1
2
3
4
5
6
7
8
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（不必须有）。

1
2
3
4
5
6
7
8
9
10
11
12
13
<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轴也一样。

1
2
3
4
/*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是必须有的配置参数

1
2
3
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方法，重置一下滚动条高度

1
2
3
4
5
6
7
oBtn.onclick = function () {
var oP = document.createElement("p");
oP.innerHTML = '123123123';
oScroll.appendChild(oP);
oMyBar1.setSize();
}

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

评论