自定义滚动条插件

1.首先css布局

*{

margin:0;

padding:0;

}

#wrap{

width:300px;

height:400px;

border:1pxsolid black;

position:absolute;

left:100px;

top:100px;

font-size:30px;

overflow:hidden;

}

#sliderWrap{

position:absolute;

right:0;

top:0;

height:100%;

width:20px;

background-color: gainsboro;

}

#middle{

position:absolute;

}

#slider{

position:absolute;

width:20px;

height:50px;

background-color: red;

border-radius:10px;

}

2.div标签

<div id="wrap">

<divid="middle">

<!--文字内容-->

</div>

<!--创建滚动条-->

<divid="sliderWrap">

<divid="slider"></div>

</div>

</div>

3.js代码

<script type="text/javascript">

functionmouseWheel(obj,fn){

varff= navigator.userAgent.indexOf("firefox");

if(ff!= -1){

//在火狐下滚轮事件要使用下面的方式绑定

obj.addEventListener("DOMMouseScroll",wheel,false);

}else{

obj.onmousewheel=wheel;

}

functionwheel(ev){

varevObj= ev || window.event;

vardown= true;

if(evObj.detail){

dowm=evObj.detail <0;

}else{

down=evObj.wheelDelta > 0;

}

//回调函数，把值回传给调用的地方

fn(down,evObj);

if(evObj.preventDefault){

evObj.preventDefault();

}

returnfalse;

}

}

</script>

<scripttype="text/javascript">

varwrap= document.getElementById("wrap");

var middle = document.getElementById("middle");

var sliderWrap = document.getElementById("sliderWrap");

var slider = document.getElementById("slider");

//计算滑块高度

varscale= wrap.offsetHeight / middle.offsetHeight;

var h = sliderWrap.offsetHeight * scale;

slider.style.height=h + "px";

var maxY = sliderWrap.offsetHeight - slider.offsetHeight;

slider.onmousedown=function(ev){

varevObj= ev || event;

vardisY= evObj.clientY - slider.offsetTop;

document.onmousemove=function(ev){

vareve= ev || event;

vary= eve.clientY - disY;

if(y<=0){

y=0;

}else if(y>= maxY){

y=maxY;

}

slider.style.top=y + "px";

vara= y / maxY;

varmT= a * (wrap.offsetHeight-middle.offsetHeight);

middle.style.top=mT + "px";

}

document.onmouseup=function(){

document.onmousemove="";

}

returnfalse;

}

mouseWheel(wrap,function(dd,ev){

varyy= slider.offsetTop;

if(dd) {

yy-=10;

} else{

yy+=10;

}

if(yy<= 0) {

yy=0;

} else if(yy >= maxY){

yy=maxY;

}

slider.style.top=yy + "px";

varmoveScale2= yy / maxY;

middle.style.top=(wrap.offsetHeight - middle.offsetHeight)*moveScale2 + "px";

});

sliderWrap.onclick=function(ev){

varevObj= ev || event;

varyyy= ev.clientY - wrap.offsetTop-slider.offsetHeight / 2;

if(yyy<= 0) {

yyy=0;

} else if(yyy >= maxY){

yyy=maxY;

}

slider.style.top=yyy + "px";

varmoveScale2= yyy / maxY;

middle.style.top=(wrap.offsetHeight - middle.offsetHeight)*moveScale2 + "px";

}

</script>