JS Loop Change div Color specific method

With Div and Div's own scroll bar to control the content of the scroll, the div's own scroll bar style can be overridden with a div layer, overriding the scroll bar style

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;


//Initialization scroll bar


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) {
$ ("#scrollCo Ntent "). CSS (" top ", Scrdefualttop +" px ");
}
Else if ((event.clienty-y1) > (scrdefualttop + scrmaxheight-scrheight)) {
$ ("#scrollContent"). CSS ("t Op ", (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:


&lt;div class= "Jtc_neir" id= "Div1" style= "height:100px"; &gt;


Total operating income: 1.166 billion yuan (year-on-year growth-1.75%)


&lt;br/&gt;


&lt;a href= "bank.aspx" &gt;dddd&lt;/a&gt; net profit: 19 million yuan (up 23.72%)


&lt;br/&gt;


earnings per share: 0.04 yuan


&lt;br/&gt;


Return on net assets: 1.58%


&lt;br/&gt;


Gross Profit rate: 12.22% (up 39.89%)


&lt;br/&gt;


total assets: 3.046 billion yuan (up -7.14%) &lt;br/&gt;


as Thiosulfate Satan Caesar


&lt;br/&gt;


Astifen Multiple Local operating income: 1.166 billion yuan (year-on-year growth-1.75%)


&lt;br/&gt;


net profit: 19 million yuan (increase 23.72%)


&lt;br/&gt;


earnings per share: 0.04 yuan


&lt;br/&gt;


Return on net assets: 1.58%


&lt;br/&gt;


Gross Profit rate: 12.22% (up 39.89%)


&lt;br/&gt;


total assets: 3.046 billion yuan (up -7.14%) &lt;br/&gt;


as Thiosulfate Satan Caesar


&lt;br/&gt;


Astifen Multiple Local operating income: 1.166 billion yuan (year-on-year growth-1.75%)


&lt;br/&gt;


net profit: 19 million yuan (increase 23.72%)


&lt;br/&gt;


earnings per share: 0.04 yuan


&lt;br/&gt;


Return on net assets: 1.58%


&lt;br/&gt;


Gross Profit rate: 12.22% (up 39.89%)


&lt;br/&gt;


total assets: 3.046 billion yuan (up -7.14%) &lt;br/&gt;


as Thiosulfate Satan Caesar


&lt;br/&gt;


Astifen Multiple Local operating income: 1.166 billion yuan (year-on-year growth-1.75%)


&lt;br/&gt;


net profit: 19 million yuan (increase 23.72%)


&lt;br/&gt;


earnings per share: 0.04 yuan


&lt;br/&gt;


Return on net assets: 1.58%


&lt;br/&gt;


Gross Profit rate: 12.22% (up 39.89%)


&lt;br/&gt;


total assets: 3.046 billion yuan (up -7.14%) &lt;br/&gt;


as Thiosulfate Satan Caesar


&lt;br/&gt;


Astifen Multiple Local operating income: 1.166 billion yuan (year-on-year growth-1.75%)


&lt;br/&gt;


net profit: 19 million yuan (increase 23.72%)


&lt;br/&gt;


earnings per share: 0.04 yuan


&lt;br/&gt;


Return on net assets: 1.58%


&lt;br/&gt;


Gross Profit rate: 12.22% (up 39.89%)


&lt;br/&gt;


total assets: 3.046 billion yuan (up -7.14%) &lt;br/&gt;


as Thiosulfate Satan Caesar


&lt;br/&gt;


Astifen Multiple places &lt;/div&gt;


&lt;div class= "Jtc_tiao" style= "Background-color:rgb" (196,206,208); Z-index:2 "id=" Div2 "&gt;


&lt;/div&gt;


&lt;div class= "Jtc_tiao" style= "Background-color:rgb" (222,222,222); Z-index:1; width:16px; "


id= "Div3" &gt;


&lt;/div&gt;


&lt;div class= "Jtc_tiao" id= "Div4" &gt;


&lt;div class= "tiao_up" &gt;


&lt;/div&gt;


&lt;div class= "Tiao_mid" &gt;


&lt;/div&gt;


&lt;div class= "Tiao_bottom" &gt;


&lt;/div&gt;


&lt;/div&gt;

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.}