js自定义滚动条

背景:
如果遇到需要给滚动条加样式的情况,在ie浏览器下可以通过样式解决,像火狐和chrome就没辙了,与其用些畸形的样式或者技巧,还不如干脆自己做一个

功能:
1)保持浏览器默认滚动条的行为:当内容超过高度时给出滚动条;支持鼠标滚轴;当鼠标移动到顶部或者底部时,滚动条自动向上或向下移动,移动到顶端或者下端则停止;当添加内容时会重新渲染滚动条,中间的滚动块会根据内容等比例缩小

2)兼容各浏览器

属性:
id : 需要绑定的元素的id
moveSize : 每移动一个单位的像素
callback : 当移动到底部时会触发

方法
moveTo : 移动到给定的top值,到超过滑块高度时,会默认为顶端

例子:

<div style="width:450px; height:400px;" id="haha">
.
.
.
var te = new scroller(
     {
        id : "haha",
        moveSize : 10,
        callback : function(){ alert("现在已经是底部了,可以追加内容噢~"); }
      }
);


扩展:
如果需要改成图片,只需要修改this.con.innerHTML = .. 这个部分

你可能感兴趣的:(JavaScript,滚动条样式,自定义滚动条,js滚动条)