Mobile Web page Custom scroll bar

<! DOCTYPE html>Initial-scale=1.0,user-scalable=no, minimum-scale=1.0, maximum-scale=1.0> <title> Mobile page Custom scroll bar </title> <style type= "Text/css" >#outer_div {width:100px;            height:100px; /*Position:absolute;*/}. inner_div{width:100px;            height:100px;        border:1px solid #efefef; }    </style>My development experience is that horizontal scrolling can be used overflow-x:scoll;<br/> However, the vertical rolling, when the end of the roll, will drive the entire page. Forgive me for forgetting to test it, as if the iphone won't drive, Android will drive. <br/>At this time you have to write your own scroll. </div><div id= "Outer_div" > <div class= "inner_div" >1</div> <div class= "Inner_div" >2&lt ;/div> <div class= "Inner_div" >3</div> <div class= "Inner_div" >4</div> <div class= "in Ner_div ">5</div> <div class=" Inner_div ">6</div> <div class=" Inner_div "></div> &L T;div class= "Inner_div" ></div> <div class= "Inner_div" ></div> <div class= "Inner_div" >< /div> <div class= "Inner_div" ></div> <div class= "Inner_div" ></div> <div class= "inner _div "></div> <div class=" Inner_div "></div></div><script type=" Text/javascript ">varGUNDONGX = 0;vargundongy = 0;varD =document;varg = ' getElementById ';varMoveele = D[g] (' Outer_div ');varSTX = Sty = ETX = ety = CurX = CurY = 0; Moveele.addeventlistener ("Touchstart",function(event) {//TouchstartGUNDONGX = 0; Gundongy= 0; //element Current PositionETX = parseint (Gett3d (Moveele, "X")); Ety= parseint (Gett3d (Moveele, "Y")); //Finger PositionSTX = Event.touches[0].pagex; Sty= Event.touches[0].pagey;},false); Moveele.addeventlistener ("Touchmove",function(event) {//Prevent dragging pagesEvent.preventdefault (); //the position of the finger minus the current position of the element is the distance to moveGUNDONGX = Event.touches[0].pagex-STX; Gundongy= Event.touches[0].pagey-sty; //the target position is the distance to move plus the current position of the element.CurX = Gundongx +ETX; CurY= Gundongy +ety; //Free to move    //moveEle.style.webkitTransform = ' Translate3d (' + (CurX) + ' px, ' + (CurY) + ' px,0px ');    //only the y-axis direction can be movedMoveEle.style.webkitTransform = ' Translate3d (' + 0 + ' px, ' + (CurY) + ' px,0px) ';}, false); Moveele.addeventlistener ("Touchend",function(event) {//TouchendETX =CurX; Ety=CurY;},false);functionGett3d (Elem, ename) {varSTR1 =Elem.style.webkitTransform; if(str1 = = "")return"0"; STR1= Str1.replace ("Translate3d", "" "); STR1= Str1.replace (")", ""); varCarr = Str1.split (","); if(ename = = "X")returnCarr[0]; Else if(ename = = "Y")returnCarr[1]; Else if(ename = = "Z")returnCarr[2]; Else return"";}</script></body>From: http://www.cnblogs.com/samwu/p/3508548.html

Mobile Web page custom scroll bar