欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js自定义滚动条

程序员文章站 2022-07-03 20:54:42
...
背景:
如果遇到需要给滚动条加样式的情况,在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 = .. 这个部分