<Div class = "Wrap" id = "Wrap">
<Div id = "ListBox">
<Div id = "para">
<P> content </P>
<P> content </P>
<P> content </P>
<P> content </P>
<P> content </P>
<P> content </P>
<P> content </P>
<P> content </P>
<P> content </P>
<P> content </P>
<P> content </P>
<P> content </P>
<P> content </P>
<P> content </P>
<P> content </P>
<P> content </P>
<P> content </P>
<P> content </P>
<P> content </P>
<P> content </P>
<P> content </P>
<P> content </P>
<P> content </P>
<P> content </P>
<P> content </P>
<P> end </P>
</Div>
</Div>
<Div id = "scrollbox">
<Div id = "scrollbar"> </div>
</Div>
</Div>
CSS:
# Wrap {position: relative; width: 100%; Height: 500px; overflow: hidden ;}
# Wrap # ListBox {float: Left; position: absolute; top: 0; left: 0; width: 470px; Background: # f2f2f2 ;}
# Wrap # scrollbox {float: Right; position: relative; width: 10px; Height: 500px; Background: #333 ;}
# Wrap # scrollbar {position: absolute; left: 0; top: 0; width: 10px; Height: 3px; margin: 0 auto; Background: # f60 ;}
JS:
VaR listwrap = Document. getelementbyid ('wrap ');
VaR ListBox = Document. getelementbyid ('listbox ');
VaR scrollbox = Document. getelementbyid ('scrollbox ');
VaR scrollbar = Document. getelementbyid ('scrollbar ');
VaR scale = 0, Height = 0, maxtop = 0, listmaxtop = 0, T = 0;
Scale = listwrap. clientheight/ListBox. scrollheight;
If (scale> 1) scale = 1;
Height = scale * scrollbox. scrollheight;
Maxtop = scrollbox. scrollheight-height;
Listmaxtop = listwrap. clientheight-ListBox. scrollheight;
If (scale = 1) scrollbox. style. Display = 'none ';
Scrollbar. style. Height = height + 'px ';
Scrollbar. onmousedown = function (EV ){
VaR EV = EV | event;
VaR DISY = eV. clienty-This. offsettop;
Document. onmousemove = function (EV ){
VaR EV = EV | event;
T = eV. clienty-DISY;
Fnscroll ();
};
Document. onmouseup = function (){
Document. onmouseup = Document. onmousemove = NULL;
};
Return false;
};
Listwrap. onmousewheel = mousescroll;
If (listwrap. addeventlistener ){
Listwrap. addeventlistener ('dommousescroll', mousescroll, false );
}
Function mousescroll (EV ){
VaR EV = EV | event;
VaR FX = eV. wheeldelta | eV. detail;
VaR bdown = true;
If (EV. Detail ){
Bdown = FX> 0? True: false;
} Else {
Bdown = FX> 0? False: true;
}
If (bdown ){
T + = 10;
} Else {
T-= 10;
}
Fnscroll ();
If (EV. preventdefault ){
Ev. preventdefault ();
}
Return false;
}
Function fnscroll (){
If (T <0) t = 0;
If (T> maxtop) t = maxtop;
VaR scale = T/maxtop;
VaR listtop = scale * listmaxtop;
Scrollbar. style. Top = T + 'px ';
ListBox. style. Top = listtop + 'px ';
};
Custom scroll bar