javascript滚轮控制模拟滚动条
此实例通过对滚轮事件的监听，通过滚轮控制滚动条的上下移动，可以将其修改后运用与使用滚轮缩放图片、改变透明度等特效。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<styletype="text/css">
*{
margin:0;
padding:0;
}
#boxwrap{
position:relative;
width:15px;
height:500px;
margin:50pxauto;
box-sizing:border-box;
border:1pxsolidgainsboro;
border-radius:6px;
}
#box{
position:absolute;
left:0px;
top:0px;
width:13px;
height:30px;
background:gray;
border-radius:6px;
}
</style>
<scripttype="text/javascript">
window.onload=function(){
varboxwrp=document.getElementById('boxwrap');
varbox=document.getElementById('box');
//兼容firefox
if(boxwrp.addEventListener){
document.addEventListener("DOMMouseScroll",fn,false);
}
document.onmousewheel=fn;//兼容IE、chrome
functionfn(ev){
varev=ev||event;
varbool=false;
//IE、chrome向上：120，向下：-120
if(ev.wheelDelta){
bool=ev.wheelDelta>0?true:false;
}
//firefox向上：-3，向下：3
else{
bool=ev.detail<0?true:false;
}
if(bool){
if(box.offsetTop>=10){
box.style.top=box.offsetTop-10+"px";
}
else{
box.style.top=0;
}
}
else{
if(box.offsetTop<=boxwrp.offsetHeight-box.offsetHeight-10){
box.style.top=box.offsetTop+10+"px";
}
else{
box.style.top=boxwrp.offsetHeight-box.offsetHeight+"px";
}
}
}
}
</script>
</head>
<body>
<divid="boxwrap">
<divid="box"></div>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。