Simple idea: Use the scroll bars of the DIV and DIV to control the scrolling of the content. the scroll bar style of the DIV can be overwritten by the DIV layer.
JQuery calculates the length and position of a scroll bar. The Code is as follows:
[Javascript]
<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]
<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, www.2cto.com
<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]
. 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 ;}
From tianyin's blog