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

查看演示立即下载

插件描述：使用js实现自定义的滚动条，支持设置滚动条颜色，设置滚动条宽度，设置是否使用XY轴滚动条，设置是否自动隐藏滚动条

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

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效：纯CSS3鼠标悬停翻转动画
下一个特效： jQuery响应式流程向导插件setStep.js