Implementation of JQuery + DIV custom scroll bar styles

JQuery calculates the length and position of a scroll bar. The Code is as follows:

Javascript

Copy codeThe Code is as follows: <script type = "text/javascript">
Var scrMinHeight = 1; // The minimum height of the scroll bar.
Var scrMaxHeight = 0; // maximum height of the scroll bar
Var scrDefualtTop = 80; // default position of the scroll bar
Var scrHeight = 0;
// Initialize the scroll bar
Function InitScroll (){
ScrMaxHeight = $ ("# mainScrollContent"). height (); // text box height
ScrHeight = document. getElementById ("mainScrollContent"). scrollHeight; // scroll text height
ScrHeight = parseInt (scrMaxHeight/scrHeight) * scrMaxHeight );
If (scrHeight <= scrMinHeight) {scrHeight = scrMinHeight ;}
If (scrHeight> = scrMaxHeight) {$ ("# scrollContent"). hide ();}
Else {
$ ("# ScrollContent"). show ();
$ ("# ScrollContent. tiao_mid" ).css ("height", (scrHeight-19) + "px ");
}
}

$ (Document). ready (function (){
$ (". Bod"). height ($ (document). height ()-80) + "px ");
$ ("# MainScrollContent"). height ($ (document). height ()-125) + "px ");
ScrMaxHeight = ($ (document). height ()-125); // maximum height of the scroll bar
$ ("# ScrollBody"). height ($ (document). height ()-125) + "px ");
$ ("# ScrollBodyBack"). height ($ (document). height ()-125) + "px ");

InitScroll ();
$ ("# MainScrollContent"). scroll (function (){
ChangeScroll ();
});
Var y1 = 0;
$ ("# ScrollContent"). mousedown (function (event ){
Var scrContentTop = $ ("# scrollContent" cmd.css ("top ");
Y1 = event. clientY-parseInt (scrContentTop. replace ("px ",""));
$ ("# ScrollContent"). mousemove (function (event ){
If (event. clientY-y1) <scrDefualtTop ){
$ ("# ScrollContent" ).css ("top", scrDefualtTop + "px ");
}
Else if (event. clientY-y1)> (scrDefualtTop + scrMaxHeight-scrHeight )){
$ ("# ScrollContent" ).css ("top", (scrDefualtTop + scrMaxHeight-scrHeight) + "px ");
}
Else {
$ ("# ScrollContent" ).css ("top", (event. clientY-y1) + "px ");
}
ChangeScrollContent ();
});
}). Mouseup (function (){
$ ("# ScrollContent"). unbind ("mousemove ");
}). Mouseout (function (){
$ ("# ScrollContent"). unbind ("mousemove ");
});
});

// Change the position of the scrolling content
Function ChangeScrollContent (){
Var scrTop = $ ("# scrollContent" cmd.css ("top ");
Var st = parseInt (scrTop. replace ("px ",""));
St = (st-scrDefualtTop) * document. getElementById ("mainScrollContent"). scrollHeight)/scrMaxHeight
$ ("# MainScrollContent"). scrollTop (st); // scroll height
}

// Change the position of the scroll bar
Function ChangeScroll (){
Var scrTop = $ ("# mainScrollContent"). scrollTop (); // scroll height
ScrTop = (scrTop * scrMaxHeight)/document. getElementById ("mainScrollContent"). scrollHeight + scrDefualtTop;
$ ("# ScrollContent" ).css ("top", scrTop + "px ");
}
</Script>

Scroll area content DIV:
Html

Copy codeThe Code is as follows: <div class = "jtc_neir" id = "Div1" style = "height: 100px;">
Total operating income: RMB 1.166 billion (year-on-year growth-1.75%)
<Br/>
<A href = "bank. aspx"> dddd </a> net profit: 0.019 billion RMB (up 23.72% year on year)
<Br/>
Earnings per share: 0.04 yuan
<Br/>
Net asset return rate: 1.58%
<Br/>
Gross profit rate: 12.22% (up 39.89% year on year)
<Br/>
Total assets: RMB 3.046 billion (year-on-year growth-7.14%) <br/>
As baking soda Satan
<Br/>
Total operating income of multiple places in aststephen: 1.166 billion yuan (year-on-year growth-1.75%)
<Br/>
Net profit: 0.019 billion yuan (up 23.72% year on year)
<Br/>
Earnings per share: 0.04 yuan
<Br/>
Net asset return rate: 1.58%
<Br/>
Gross profit rate: 12.22% (up 39.89% year on year)
<Br/>
Total assets: RMB 3.046 billion (year-on-year growth-7.14%) <br/>
As baking soda Satan
<Br/>
Total operating income of multiple places in aststephen: 1.166 billion yuan (year-on-year growth-1.75%)
<Br/>
Net profit: 0.019 billion yuan (up 23.72% year on year)
<Br/>
Earnings per share: 0.04 yuan
<Br/>
Net asset return rate: 1.58%
<Br/>
Gross profit rate: 12.22% (up 39.89% year on year)
<Br/>
Total assets: RMB 3.046 billion (year-on-year growth-7.14%) <br/>
As baking soda Satan
<Br/>
Total operating income of multiple places in aststephen: 1.166 billion yuan (year-on-year growth-1.75%)
<Br/>
Net profit: 0.019 billion yuan (up 23.72% year on year)
<Br/>
Earnings per share: 0.04 yuan
<Br/>
Net asset return rate: 1.58%
<Br/>
Gross profit rate: 12.22% (up 39.89% year on year)
<Br/>
Total assets: RMB 3.046 billion (year-on-year growth-7.14%) <br/>
As baking soda Satan
<Br/>
Total operating income of multiple places in aststephen: 1.166 billion yuan (year-on-year growth-1.75%)
<Br/>
Net profit: 0.019 billion yuan (up 23.72% year on year)
<Br/>
Earnings per share: 0.04 yuan
<Br/>
Net asset return rate: 1.58%
<Br/>
Gross profit rate: 12.22% (up 39.89% year on year)
<Br/>
Total assets: RMB 3.046 billion (year-on-year growth-7.14%) <br/>
As baking soda Satan
<Br/>
Stephen's multiple places </div>
<Div class = "jtc_tiao" style = "background-color: rgb (196,206,208); z-index: 2;" id = "Div2">
</Div>
<Div class = "jtc_tiao" style = "background-color: rgb (222,222,222); z-index: 1; width: 16px ;"
Id = "Div3">
</Div>
<Div class = "jtc_tiao" id = "Div4">
<Div class = "tiao_up">
</Div>
<Div class = "tiao_mid">
</Div>
<Div class = "tiao_bottom">
</Div>
</Div>

Main style:
Css

Copy codeThe Code is as follows :. jtc_neir {margin-left: 20px; margin-right: 20px; color: #000000; font-size: 12px; background: none; line-height: 32px; overflow-y: scroll; overflow-x: hidden;
Scrollbar-3dlight-color: rgb (222,222,222 );
Scrollbar-arrow-color: rgb (0, 222,222,222 );
Scrollbar-base-color: rgb (0, 222,222,222 );
Scrollbar-darkshadow-color: rgb (222,222,222 );
Scrollbar-face-color: rgb (0, 222,222,222 );
Scrollbar-highlight-color: rgb (222,222,222 );
Scrollbar-shadow-color: rgb (222,222,222 );}

. Jtc_tiao {width: 8px; position: absolute; top: 80px; right: 20px; z-index: 10 ;}
. Tiao_up {width: 8px; height: 10px; background: url (../images/scrollbar-3.jpg) left top no-repeat; line-height: 0px; overflow: hidden ;}
. Tiao_mid {width: 8px; background: url (../images/scrollbar-3.jpg)-39px center repeat-y; line-height: 0px; overflow: hidden ;}
. Tiao_bottom {width: 8px; height: 10px; background: url (.. /images/scrollbar-3.jpg)-13px bottom no-repeat; font-size: 0; line-height: 0px; overflow: hidden ;}