Jquery+div custom scroll bar style specific implementation _javascript tips

jquery calculates the length and position of the scroll bar, as follows:

Javascript

Copy Code code as follows:

<script type= "Text/javascript" >
var scrminheight = 1; scroll bar Minimum Height
var scrmaxheight = 0; scroll bar Maximum Height
var scrdefualttop = 80; Scroll bar default location
var scrheight = 0;
Initializing scroll bars
function Initscroll () {
Scrmaxheight = $ ("#mainScrollContent"). Height (); text box height
Scrheight = document.getElementById ("Mainscrollcontent"). ScrollHeight; Scrolling 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 ()-() + "px");
$ ("#mainScrollContent"). Height ((document). Height ()--) + "px");
Scrmaxheight = ($ (document). Height ()-125); scroll bar Maximum Height
$ ("#scrollBody"). Height ((document). Height ()--) + "px");
$ ("#scrollBodyBack"). Height ((document). Height ()--) + "px");

Initscroll ();
$ ("#mainScrollContent"). Scroll (function () {
Changescroll ();
});
var y1 = 0;
$ ("#scrollContent"). MouseDown (function (event) {
var scrcontenttop = $ ("#scrollContent"). 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 scrolling content
function Changescrollcontent () {
var scrtop = $ ("#scrollContent"). CSS ("top");
var st = parseint (scrtop.replace ("px", ""));
St = ((st-scrdefualttop) * document.getElementById ("Mainscrollcontent"). ScrollHeight)/Scrmaxheight
$ ("#mainScrollContent"). ScrollTop (ST); The height of the scroll
}

Change the scroll bar position
function Changescroll () {
var scrtop = $ ("#mainScrollContent"). ScrollTop (); The height of the scroll
Scrtop = (Scrtop * scrmaxheight)/document.getElementById ("Mainscrollcontent"). ScrollHeight + ScrDefualtTop;
$ ("#scrollContent"). CSS ("top", Scrtop + "px");
}
</script>

Scrolling area Content div:
Html

Copy Code code as follows:

<div class= "Jtc_neir" id= "Div1" style= "height:100px"; >
Total operating income: 1.166 billion yuan (year-on-year growth-1.75%)
<br/>
<a href= "bank.aspx" >dddd</a> net profit: 19 million yuan (up 23.72% year-on-year)
<br/>
Earnings per share: 0.04 RMB
<br/>
NET assets Yield: 1.58%
<br/>
Gross Profit margin: 12.22% (growth 39.89%)
<br/>
Total assets: 3.046 billion yuan (up -7.14%) <br/>
As Thiosulfate Satan Caesar
<br/>
Astifen multiple local operating income: 1.166 billion yuan (year-on-year growth-1.75%)
<br/>
Net profit: 19 million yuan (up 23.72% year-on-year)
<br/>
Earnings per share: 0.04 RMB
<br/>
NET assets Yield: 1.58%
<br/>
Gross Profit margin: 12.22% (growth 39.89%)
<br/>
Total assets: 3.046 billion yuan (up -7.14%) <br/>
As Thiosulfate Satan Caesar
<br/>
Astifen multiple local operating income: 1.166 billion yuan (year-on-year growth-1.75%)
<br/>
Net profit: 19 million yuan (up 23.72% year-on-year)
<br/>
Earnings per share: 0.04 RMB
<br/>
NET assets Yield: 1.58%
<br/>
Gross Profit margin: 12.22% (growth 39.89%)
<br/>
Total assets: 3.046 billion yuan (up -7.14%) <br/>
As Thiosulfate Satan Caesar
<br/>
Astifen multiple local operating income: 1.166 billion yuan (year-on-year growth-1.75%)
<br/>
Net profit: 19 million yuan (up 23.72% year-on-year)
<br/>
Earnings per share: 0.04 RMB
<br/>
NET assets Yield: 1.58%
<br/>
Gross Profit margin: 12.22% (growth 39.89%)
<br/>
Total assets: 3.046 billion yuan (up -7.14%) <br/>
As Thiosulfate Satan Caesar
<br/>
Astifen multiple local operating income: 1.166 billion yuan (year-on-year growth-1.75%)
<br/>
Net profit: 19 million yuan (up 23.72% year-on-year)
<br/>
Earnings per share: 0.04 RMB
<br/>
NET assets Yield: 1.58%
<br/>
Gross Profit margin: 12.22% (growth 39.89%)
<br/>
Total assets: 3.046 billion yuan (up -7.14%) <br/>
As Thiosulfate Satan Caesar
<br/>
Astifen 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 Code code 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 (222,222,222);
Scrollbar-base-color:rgb (222,222,222);
Scrollbar-darkshadow-color:rgb (222,222,222);
Scrollbar-face-color:rgb (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;}