更新时间: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、创建实例后就有滚动条了
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方法,来重新计算高度。
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("载入失败,请刷新页面重试!"); } }); })