标签：style color java os io strong ar art
CSS部分
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
width: 300px;
height: 400px;
overflow: hidden;
position: relative;
border: 1px solid #ccc;
margin: 100px;
}
#content{
position: absolute;
font-size: 50px;
padding-right: 40px;
}
#slider{
width: 20px;
height: 400px;
background-color: #ccc;
position: absolute;
right: 0;
top: 0;
}
#bar{
width: 20px;
position: absolute;
height: 50px;
background-color: yellow;
}
</style>
HTML部分
<div id="wrap">
<div id="content">start的撒发撒的范德萨发生的飞洒地方的撒发实得分撒的发生的飞撒的发生的的撒发撒的范德萨发生的飞洒地方的撒发实得分撒的发生的飞撒的发生的的撒发撒的范德萨发生的飞洒地方的撒发实得分撒的发生的飞撒的发生的的撒发撒的范德萨发生的飞洒地方的撒发实得分撒的发生的飞撒的发生的的撒发撒的范德萨发生的飞洒地方的撒发实得分撒的发生的飞撒的发生的的撒发撒的范德萨发生的飞洒地方的撒发实得分撒的发生的飞撒的发生的的撒发撒的范德萨发生的飞洒地方的撒发实得分撒的发生的飞撒end</div>
<div id="slider">
<div id="bar"></div>
</div>
</div>
JS部分
<script type="text/javascript" src="mousewhell.js"></script>
<script>
window.onload=function (){
var oWrap=document.getElementById("wrap");
var content=document.getElementById("content");
var bar=document.getElementById("bar");
var slider=document.getElementById("slider");
var contentMaxHeight=content.offsetHeight;
var wrapMaxHeight=oWrap.clientHeight;
var h=wrapMaxHeight/contentMaxHeight*wrapMaxHeight;
if(h>=wrapMaxHeight){
slider.style.display="none";
}else if(h<50){
h=50;
}
bar.style.height=h+"px";
var maxHeight=slider.offsetHeight-bar.offsetHeight;
var contentMaxMove=contentMaxHeight-wrapMaxHeight;
var y=0;
function move(){
if(y<0){
y=0;
}else if(y>=maxHeight){
y=maxHeight;
}
var scale=y/maxHeight;
content.style.top=-contentMaxMove*scale+"px";
bar.style.top=y+"px";
}
mousewhell(oWrap,function (down){
if(down){
y+=10;
}else{
y-=10;
}
move();
});
document.onkeydown=function (ev){
var oEvent=ev||window.event;
switch(oEvent.keyCode){
case 38:
y-=10;
break;
case 40:
y+=10;
break;
}
move();
}
slider.onclick=function (ev){
var oEvent=ev||window.event;
y=oEvent.clientY-oWrap.offsetTop-bar.offsetHeight/2;
move();
}
bar.onmousedown=function (ev){
var oEvent=ev||window.event;
var disY=oEvent.clientY-bar.offsetTop;
document.onmousemove=function (ev){
var oEvent=ev||window.event;
y=oEvent.clientY-disY;
move();
}
document.onmouseup=function (){
document.onmousemove=null;
}
return false;
}
}
</script>
Javascript：实操---自定义滚动条,布布扣,bubuko.com
标签：style color java os io strong ar art
原文地址：http://www.cnblogs.com/lxbchengxunyuan/p/3911713.html
