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="http://www.mamicode.com/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>