how to design your particular div scroll

let me explain how to design your particular div scroll through css, html
and JavaScript.

First use following JavaScript code in your head tag after start head tag before close head tag

this code



put this JavaScript code start body tag
i am using here <> for {} there is html problem
{script type="text/javascript"}

{/script}


now creat a JavaScript file

where can put this code and this file link to your html file

eval(function(p,a,c,k,e,r){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('7 E={4k:6(){P.M(1m,\'4z\',P.4v)},3C:6(f){7 g=15,H=1m,1R=5J;5(!g.20||!g.4D)B;5(3E(f)==\'4F\')f=15.20(f);5(f==14||1R.2Q.2u(\'6H\')!=-1||((1R.2Q.2u(\'6y\')!=-1||1R.2Q.2u(\'6C\')!=-1)&&!(3E(4l)!="6h"&&4l.5Y))||1R.6d==\'67\'||(1R.5N.2u(\'6t\')!=-1&&1R.2Q.2u(\'66\')!=-1))B;5(f.1D){f.1D();B};5(!f.1S||f.1S==\'\'){7 h="68",c=1;1H(15.20(h+c)!=14){c++};f.1S=h+c}7 k=f.1S;f.3c=2i 65();7 l=f.3c;l.1M={5W:[\'-1s\',0],5V:[0,\'-1s\'],5X:[\'1s\',0],5Z:[0,\'1s\'],6G:[0,\'-1p\'],6I:[0,\'1p\'],6J:[0,\'-4W\'],6l:[0,\'+4W\']};l.3i=["-2s","2s"];l.44=["-2s","2s"];7 m=12(\'6v\',C),D=12(\'5f\',C),G=12(\'5k\',C),1d=12(\'5g\',C);7 o=12(\'5e\',C),1h=12(\'5l\',C);2E=8;1d.A.1u=\'4X 4M 5r\';1d.1C();f.1q.4J=\'2t\';1h.A.5L="5M";1h.A.1B="4N";1h.A.U="4N";1h.A.26="3X";1h.A.3S="-5A";1h.1C();7 p=f.T,54=f.1c;2f(f,1d,\'17\',[\'1u-13-U\',\'1u-1N-U\',\'1u-11-U\',\'1u-1P-U\']);7 q=f.T,55=f.1c,3I=54-55,3V=p-q;7 s=(f.1T)?f.1T:0,57=(f.1V)?f.1V:0;7 t=15.3W.1i,3d=/#([^#.]*)$/;7 u=[\'5j\',\'5n\',\'5p\'];l.V=[];l.1W=[];l.5s=l.O=[];l.5G=l.1Q=[];l.1o=[8,8];l.W=[];l.1x=[0,0];l.1k=[];l.3F=[];l.X=[];1H(f.56){m.Z(f.56)};m.Z(o);f.Z(D);f.Z(1d);5(N(f,\'26\')!=\'3X\')f.1q.26="33";D.A.U="51";D.A.1B="51";D.A.11="17";D.A.13="17";2f(f,1d,"17",[\'J-13\',\'J-11\',\'J-1N\',\'J-1P\']);7 w=f.1c,4O=f.T,3N;3N=D.T;D.A.5x="5w 4M 5v";5(D.T>3N)2E=C;D.A.5C="17";2f(1d,f,8,[\'J-13\',\'J-11\',\'J-1N\',\'J-1P\']);1r(D);1r(f);l.X[0]=D.1e-f.1e;l.X[2]=D.1f-f.1f;f.1q.4L=N(f,"J-1P");f.1q.4H=N(f,"J-1N");1r(D);1r(f);l.X[1]=D.1e-f.1e;l.X[3]=D.1f-f.1f;f.1q.4L=N(1d,"J-11");f.1q.4H=N(1d,"J-13");7 x=l.X[2]+l.X[3],3Q=l.X[0]+l.X[1];2f(f,D,8,[\'J-13\',\'J-1N\',\'J-11\',\'J-1P\']);G.A.U=f.1c+\'F\';G.A.1B=f.T+\'F\';D.A.U=w+\'F\';D.A.1B=4O+\'F\';G.A.26=\'3X\';G.A.11=\'17\';G.A.13=\'17\';G.1C();D.Z(m);f.Z(G);G.Z(1h);m.A.26=\'33\';D.A.26=\'33\';m.A.11="0";m.A.U="4K%";D.A.4J=\'2t\';D.A.13="-"+l.X[2]+"F";D.A.11="-"+l.X[0]+"F";l.3R=1h.T;l.39=6(){7 a=m.5E,36=5H=0;1n(7 i=0;il.2g[1])?1:0;l.3q=(3yl.2g[3])?1:0;l.3l=a-l.4Z;l.3r=3m-l.4V;l.35=(l.3l>40)?1:(l.3l<-40)?-1:0;l.2Y=(l.3r>40)?1:(l.3r<-40)?-1:0;5((l.35!=0||l.2Y!=0)&&!l.1X)l.1X=H.2Z(6(){5(l.35==0&&l.2Y==0){H.2n(l.1X);l.1X=8;B};2H();5(l.3p==1||l.3q==1)f.18((l.35*l.3p)+"s",(l.2Y*l.3q)+"s",C)},45)}6 2m(){E.2c(g,\'2w\',3n);5(l.1X)H.2n(l.1X);l.1X=8;5(l.3w)H.53(l.3w);5(l.3s)H.2n(l.3s)}6 2H(){l.3v=(H.58)?H.58:(g.2b&&g.2b.1V)?g.2b.1V:0;l.3o=(H.52)?H.52:(g.2b&&g.2b.1T)?g.2b.1T:0}f.1D=6(a){5(G.L[1]()===0||G.L[0]()===0)B;m.A.J=\'4X\';7 b=l.W[0],4G=l.W[1],3e=G.2k,2C=G.2R,32,2W,2z=[];G.A.U=f.1c-3I+\'F\';G.A.1B=f.T-3V+\'F\';2z[0]=l.O[0];2z[1]=l.O[1];l.W[0]=l.39()>l.O[0];l.W[1]=l.2G()>l.O[1];7 c=(b!=l.W[0]||4G!=l.W[1]||2z[0]!=l.O[0]||2z[1]!=l.O[1])?C:8;3e.19.3h(l.W[1]);2C.19.3h(l.W[0]);32=(l.W[1]||l.1W[1]);2W=(l.W[0]||l.1W[0]);l.39();l.2G();l.3T();l.3J();5(!l.W[0]||!l.W[1]||l.1k[0]||l.1k[1])2C.2D.1C();1l 2C.2D.2y();5(32)3b(3e,(2W&&!l.1k[0])?l.1x[1]:0);1l m.A.11="0";5(2W)3b(2C,(32&&!l.1k[1])?l.1x[0]:0);1l m.A.13="0";5(c&&!a)f.1D(C);m.A.J=\'17\';l.1o[0]=l.1o[1]=8};f.69=f.18=6(a,b,c){7 d=[[8,8],[8,8]],Q;5((a||a===0)&&l.V[0]){a=3z(a,0);Q=G.2R.4;Q.1a=(c)?Y.1U(Y.1Y(Q.1I,Q.1a-a),0):-a;Q.43();d[0]=[-Q.1a-Q.1O,-Q.1I]}5((b||b===0)&&l.V[1]){b=3z(b,1);Q=G.2k.4;Q.1a=(c)?Y.1U(Y.1Y(Q.1I,Q.1a-b),0):-b;Q.43();d[1]=[-Q.1a-Q.1O,-Q.1I]}5(!c)l.1o[0]=l.1o[1]=8;B d};f.3a=6(a){5(a==14||!4c(a))B;7 b=4f(a);f.18(b[0]+l.X[2],b[1]+l.X[0],8);f.18(0,0,C)};2f(1d,f,\'17\',[\'1u-13-U\',\'1u-1N-U\',\'1u-11-U\',\'1u-1P-U\']);f.4S(1d);f.1T=0;f.1V=0;f.2X=C;30(f,\'64\',8);f.1D();f.18(57,s,C);5(t.R(3d)){f.3a(g.20(t.R(3d)[1]))}G.2y();l.6a=H.2Z(6(){7 n=1h.T;5(n!=l.3R){f.1D();l.3R=n}},6c);6 3z(v,i){7 a=v.6e();v=6f(a);B 1b((a.R(/p$/))?v*l.O[i]*0.9:(a.R(/s$/))?v*l.O[i]*0.1:v)}6 3k(a){7 a=a.63(\'-\'),3u=a[0],i;1n(i=1;3t=a[i];i++){3u+=3t.62(0).5R()+3t.5S(1)}B 3u}6 N(a,b){5(H.4E)B H.4E(a,14).5T(b);5(a.4w)B a.4w[3k(b)];B 8};6 2f(a,b,c,d){7 e=2i 3U();1n(7 i=0;i0)||(1y[1][0]==0&&1g<0)));5(l.V[0]&&(!l.V[1]||1K))1y=f.18(l.3i[1G],8,C);3Z=!l.V[0]||(l.V[0]&&l.V[1]&&2P&&!1K)||(l.V[0]&&((1y[0][0]==1y[0][1]&&1g>0)||(1y[0][0]==0&&1g<0)));5(2P&&3Z&&!1K)l.1o[1G]=C;1l l.1o[1G]=8;5(e.1J)e.1J();B 8};6 4c(a){1H(a.1A){a=a.1A;5(a==f)B C}B 8};6 1r(a){7 b=a,23=1z=0;7 c="";5(b.38){1H(b){23+=b.4y;1z+=b.4x;b=b.38;c+=1z+" "}}1l 5(b.x){23+=b.x;1z+=b.y}a.1f=23;a.1e=1z};6 4f(a){7 b=a;23=1z=0;1H(!b.T&&b.1A&&b!=m&&N(b,\'3D\')=="5K"){b=b.1A}5(b.38){1H(b!=m){23+=b.4y;1z+=b.4x;b=b.38}}B[23,1z]};6 30(a,b,c){5(!a.1t)a.1t=\'\';7 d=a.1t;5(b&&!d.R(2F("(^|\\\\s)"+b+"($|\\\\s)")))d=d.3O(/(\\S$)/,\'$1 \')+b;5(c)d=d.3O(2F("((^|\\\\s)+"+c+")+($|\\\\s)","g"),\'$2\').3O(/\\s$/,\'\');a.1t=d}},4v:6(){5(E.34)1m.2n(E.34);7 d=/#([^#.]*)$/,2l=/(.*)#.*$/,5D,i,1w,4B=15.2J("a"),2q=15.3W.1i;5(2q.R(2l))2q=2q.R(2l)[1];1n(i=0;1w=4B[i];i++){5(1w.1i&&1w.1i.R(d)&&1w.1i.R(2l)&&2q===1w.1i.R(2l)[1]){1w.3P=C;E.M(1w,\'5t\',6(e){5(!e)e=1m.1E;7 a=(e.1j)?e.1j:P;1H(!a.3P&&a.1A){a=a.1A};5(!a.3P)B;7 b=15.20(a.1i.R(d)[1]),31=8;5(b==14)b=(b=15.5z(a.1i.R(d)[1])[0])?b:14;5(b!=14){7 c=b;1H(c.1A){c=c.1A;5(c.3a){c.3a(b);31=c}};5(31){5(e.1J)e.1J();15.3W.1i="#"+a.1i.R(d)[1];31.3c.2d();B 8}}})}};E.3L();5(1m.48)1m.48()},3L:6(){5(E.5B)B;E.5u=C;7 a=E.4d(15.2J("5q")[0],"4u",\'4a\');1n(7 i=0,3K;3K=a[i];i++)E.3C(3K)},4d:6(a,b,c){5(3E(a)==\'4F\')a=15.20(a);5(a==14)B 8;7 d=2i 2F("(^|\\\\s)"+c+"($|\\\\s)"),5y,3B=[],3H=0;7 e=a.2J(b);1n(7 i=0,2v;2v=e[i];i++){5(2v.1t&&2v.1t.R(d)){3B[3H]=2v;3H++}}B 3B},34:1m.2Z(6(){7 a=15.20(\'4a-5I\');5(a!=14){E.3L();1m.2n(E.34)}},4K),M:6(a,b,c){5(!E.2e(a,b,c)&&a.4h){a.4h(\'4g\'+b,c)}},2e:6(a,b,c){5(a.46){a.46(b,c,8);1m.46("5c",6(){E.2c(a,b,c)},8);B C}1l B 8},2c:6(a,b,c){5(!E.4e(a,b,c)&&a.4b)a.4b(\'4g\'+b,c)},4e:6(a,b,c){5(a.49){a.49(b,c,8);B C}1l B 8}};6 6L(a){E.3C(a)};E.4k();',62,420,'||||sBr|if|function|var|false||||||||||||||||||||||||||||sY|return|true|mDv|fleXenv|px|tDv|wD|movBr|padding|curPos|getSize|addTrggr|getStyle|cntRSize|this|Bar|match||offsetHeight|width|scroller|reqS|paddings|Math|appendChild||top|createDiv|left|null|document|setPos|0px|contentScroll|sDv|trgtScrll|parseInt|offsetWidth|pDv|yPos|xPos|delta|fDv|href|srcElement|forcedHide|else|window|for|edge||style|findPos||className|border|sSBr|anchoR|barSpace|scrollState|curtop|parentNode|height|fHide|scrollUpdate|event|target|iNDx|while|mxScroll|preventDefault|hoverH|mV|keyAct|right|targetSkew|bottom|cntSize|nV|id|scrollTop|min|scrollLeft|forcedBar|tSelectFunc|max|sFBr|getElementById|goScroll|minPos|curleft|sSDv|_|position|maxPos|moved|mWheelProc|indx|documentElement|remTrggr|mDPosFix|addChckTrggr|copyStyles|mTBox|clientX|new|createScrollBars|vrt|urlExt|intClear|clearInterval|sFDv|setSize|urlBase|visibility||hidden|indexOf|pusher|mousemove|retFalse|fShow|cPSize|barPadding|clientY|hBr|jBox|stdMode|RegExp|getContentHeight|pageScrolled|ofstParent|getElementsByTagName|vertical|mMoveBar|scrollBoth|focusProtect|formItem|vEdge|userAgent|hrz|barZ|sRange|clicked|mouseup|hUpReq|fleXcroll|sYdir|setInterval|classChange|eScroll|vUpReq|relative|catchFastInit|sXdir|maxCWidth|mMouseUp|offsetParent|getContentWidth|scrollToElement|updateScroll|fleXdata|uReg|vBr|padLoss|baseProp|setVisibility|wheelAct|mdX|camelConv|xAw|mY|tSelectMouse|yScrld|mOnXEdge|mOnYEdge|yAw|barClickScroll|parT|reT|xScrld|barClickRetard|doScrollPos|mdY|calcCScrollVal|refreshTimeout|retArray|fleXcrollMain|display|typeof|forcedPos|hElem|key|brdWidthLoss|setWidth|tgDiv|initByClass|selectstart|mHeight|replace|fleXanchor|padHeightComp|zTHeight|zIndex|setHeight|Array|brdHeightLoss|location|absolute|inputName|hEdge||maxx|prepareScroll|contentScrollPos|baseAct||addEventListener|onmousedown|onfleXcrollRun|removeEventListener|flexcroll|detachEvent|isddvChild|getByClassName|remChckTrggr|findRCpos|on|attachEvent|aSize|pointerOffsetY|fleXcrollInit|HTMLElement|pointerOffsetX|scrlTrgt|getPos|index|setTimeout|80|flexinactive|inCurPos|div|globalInit|currentStyle|offsetTop|offsetLeft|load|detail|anchorList|wheelDelta|createElement|getComputedStyle|string|reqV|paddingLeft|mousewheel|overflow|100|paddingTop|solid|1em|postHeight|pkeY|vBar|keyCode|removeChild|DOMMouseScroll|fixIEDispBug|inMposY|100p|1px|length|inMposX|opera|100px|pageYOffset|clearTimeout|brdWidth|intlWidth|firstChild|oScrollX|pageXOffset|none|_hscroller|block|unload|vscroller|domfixdiv|mcontentwrapper|copyholder|blur|onblur|textarea|scrollwrapper|zoomdetectdiv|xScroll|input|yScroll|select|body|blue|containerSize|click|initilialized|black|2px|borderBottom|clsnm|getElementsByName|999|initialized|borderBottomWidth|matcH|childNodes|focus|contentSize|compPad|init|navigator|inline|fontSize|12px|platform|hscroller|scrollgeneric|scrollerjogbox|toUpperCase|substr|getPropertyValue|bscrollgeneric|_38|_37|_39|prototype|_40|visible|base|charAt|split|flexcrollactive|Object|MSIE|KDE|flex__|commitScroll|sizeChangeDetect|basebeg|2500|vendor|toString|parseFloat|mousedown|undefined|hBar|setAttribute|bar|_35|keydown|425|tabIndex|onmouseclick|type|onmousewheel|75|Mac|resize|contentwrapper|dblclick|ondblclick|AppleWebKit|onmouseover|keyup|barbeg|Safari|barend|keypress|baseend|_33|OmniWeb|_34|_36|auto|CSBfleXcroll'.split('|'),0,{}))

now creat your css file

where can put your css code and link to this css file to in your html file

flowing code
i am passing id mainbody in javascript function which is mention in html head code
/*#mainbody, {background-color: #FFFFFF; width: 602px; height: 338px;margin-left:-8px;margin-top:-12px; overflow: auto; border-bottom: 2px solid #F1EECC; border-top: 2px solid #F1EECC; outline: none;}
#test1 {background-color: #FFFFFF; left: 0.8em; top: 1em; }
#test1 div {color: #000000;}
.aligntocenter {margin: 0.5em auto; border: 2px solid #A22; width: 90%; position: relative; height: 500px;}
.fixedsize {width: 400px; height: auto; position: relative; color: black; padding: 1px;}
.scrollgeneric {line-height: 1px; font-size: 1px; position: absolute;}
.vscrollerbase, .vscrollerbar {width: 25px; top: 0px;}
.vscrollerbar {left: 0px;}
.hscrollerbase, .hscrollerbar {height: 15px; left: 0px;}
.hscrollerbar {top: 0px;}
.vscrollerbar, .hscrollerbar {padding: 5px; z-index: 2;}
.vscrollerbarbeg {background-color:#C1C9D0 url(images/verticlascroll.gif) 0px -10px; width: 25px; height: 20px;}
.vscrollerbarend {background-color:#C0CBD8 url(images/verticalscroll.gif); width: 25px; height: 10px;}
.hscrollerbarbeg {background-color:#410000 url(/web/images/verticaloverscroll.gif) -10px 0px; height: 15px; width: auto; left: 0;}
.hscrollerbarend {background-color:#410000 url(/web/images/verticaloverscroll.gif); height: 15px; width: 10px;}
.vscrollerbase, .hscrollerbase {background-color: #D1DDCB; background-image: url(images/horigentalscroll.png);}
.hscrollerbasebeg {left: 0px; top: 0px; height: 15px; background: url(images/scrollbases.gif) -22px 0px no-repeat;}
.hscrollerbaseend {top: 0px; height: 15px; width: 7px; background: url(images/scrollbases.gif) 0% 0% no-repeat;}
.vscrollerbasebeg {top: 0px; width: 15px; background: url(images/scrollbases.gif) -7px -8px no-repeat;}
.vscrollerbaseend {height: 7px; width: 15px; background: url(images/scrollbases.gif) -7px 0px no-repeat;}
.scrollerjogbox {width: 15px; height: 15px; bottom: 0px; right: 0px; background: white url(images/scrolljog.gif) 50% 50%;}*/

after finished all these stuff your particular div scroll design as you need change your css code as you need

Note : My English communication is note strong so please avoid sentence error

if you need any query please email me anand.hey@gmil.com