<ptml> <pead><title> Layer scroll bar diy-powered by yexj00</title> <style> <!--*{font-size:1 2PX}--> </style> <script language= "Javascript" > <!--function $ (obj) {return document.all[obj]; function Setbarheight () {$ ("Scroll_bar"). Style.height= ($ ("scroll_content"). ClientHeight)/($ ("scroll_content"). ScrollHeight) * ($ ("Scroll_area"). offsetheight) + "px"; if ($ ("Scroll_bar"). offsetheight>=$ ("Scroll_area"). offsetheight) {$ ("Scroll_bar"). style.display= ' None '; }//--> </script> <script language= "Javascript" > <!--var drag=false; Whether to allow the drag var mx,my; var scrollbar_l; var scrollbar_t; var Scrollbar_w; var scrollbar_h; var scrollarea_t,scrollarea_h; var Startt,starty; function Getinfor () {mx=event.clientx+document.documentelement.scrollleft; My=event.clienty+document.documentelement.scrolltop; scrollbar_l=document.documentelement.clientleft+$ ("Outerdiv"). style.pixelleft+$ ("Scroll_area").fsetleft+$ ("Scroll_bar"). offsetleft; scrollbar_t=document.documentelement.clienttop+$ ("Outerdiv"). style.pixeltop+$ ("Scroll_area"). offsetTop+$ (" Scroll_bar "). offsettop; scrollbar_w=$ ("Scroll_bar"). offsetwidth; scrollbar_h=$ ("Scroll_bar"). offsetheight; scrollarea_t=document.documentelement.clienttop+$ ("Outerdiv"). style.pixeltop+$ ("Scroll_area"). OffsetTop; scrollarea_h=$ ("Scroll_area"). offsetheight; function Dragit () {getinfor (); if (event.srcelement.id== "Scroll_bar") {drag=true; $ ("Scroll_bar"). style.background= "#cccccc"; startt=$ ("Scroll_bar"). Style.pixeltop; Starty=event.clienty; Document.onmousemove=move; } function Move () {if (drag==true) {$ ("Scroll_bar"). Style.pixeltop=startt+event.clienty-starty; $ ("Scroll_content"). scrolltop=$ ("Scroll_bar"). style.pixeltop/$ ("Scroll_area"). offsetheight*$ ("Scroll_content") . scrollheight; if ($ ("Scroll_bar"). Style.pixeltop<=0) {$ ("Scroll_bar"). Style.pixeltop=0} if ($ ("Scroll_bar"). Style.pixeltop >= (scrollarea_h-scrollbar_h)) {$ ("Scroll_bar"). Style.pixeltop=scrollarea_h-scrollbar_h; return false; }} Document.onmousedown=dragit; Document.onmouseup=new Function ("drag=false;$" (' Scroll_bar '). style.background= ' #efefef '); --> </script> </pead> <body onload= "setbarheight ()" > <div id= "outerdiv" > <div id= " Scroll_content "> <!--this is the content area of the layer--> <script language=" Javascript "> <!--var str=" This is a layered scroll bar, powered by yexj00! "; Str=str.split (""); for (i=0;i<str.length;i++) {document.write (str[i]+ "<br>"); //--> </script> <!---level content area end--> </div> <div id= "UP_BTT" ></div> <div I d= "Scroll_area" > <div id= "Scroll_bar" ></div> </div> <div id= "DOWN_BTT" ></div > </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
