滚动条

//滚动条的高/装滚动条的div高 = box高/文字div的高
//滚动条的高=装滚动条的div高*box高/文字div的高
//最外面的div
var box=myTab("box");
//文字div
var content=myTab("content");
//滚动条的div
var scroll=myTab("scroll");
//滚动条
var bar=myTab("bar");

// 滚动条的高
var height=scroll.offsetHeight*box.offsetHeight/content.offsetHeight;
bar.style.height=height+“px”;
//按下滚动条
bar.οnmοusedοwn=function (e) {

//获取间距
    var spaceY=e.clientY-bar.offsetTop;
    //移动
    bar.onmousemove=function (e) {

        //获取滚动条离div的top值
        var y=e.clientY-spaceY;
        //设置最大值和最小值
       y= y<0? 0: y;
       y=y>scroll.offsetHeight-bar.height?scroll.offsetHeight-bar.height:y;

        bar.style.top=y+"px";
        //设置鼠标移动时，文字不被选中
        window.getSelection ? window.getSelection().removeAllRanges(): document.selection.empty();
       //滚动的移动距离/文字div的移动距离 = 滚动条最大的移动距离/文字div最大移动距离
        //文字div的移动距离=滚动的移动距离*文字div最大移动距离/滚动条最大的移动距离
        var textHeight=y*(content.offsetHeight-box.offsetHeight)/(scroll.offsetHeight-bar.offsetHeight);
        content.style.marginTop=-textHeight+"px";

    }

}
//鼠标抬起的时候，解绑移动事件
document.onmouseup=function () {
    bar.onmousemove=null;

}