js自定义滚动条
程序员文章站
2022-07-03 20:54:42
...
背景:
如果遇到需要给滚动条加样式的情况,在ie浏览器下可以通过样式解决,像火狐和chrome就没辙了,与其用些畸形的样式或者技巧,还不如干脆自己做一个
功能:
1)保持浏览器默认滚动条的行为:当内容超过高度时给出滚动条;支持鼠标滚轴;当鼠标移动到顶部或者底部时,滚动条自动向上或向下移动,移动到顶端或者下端则停止;当添加内容时会重新渲染滚动条,中间的滚动块会根据内容等比例缩小
2)兼容各浏览器
属性:
id : 需要绑定的元素的id
moveSize : 每移动一个单位的像素
callback : 当移动到底部时会触发
方法
moveTo : 移动到给定的top值,到超过滑块高度时,会默认为顶端
例子:
扩展:
如果需要改成图片,只需要修改this.con.innerHTML = .. 这个部分
如果遇到需要给滚动条加样式的情况,在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 = .. 这个部分