最近做的做那个app的项目由于用overflow：hidden导致了很多问题，于是决定研究下html5的touch事件。想找个全面点的帖子很难，虽然好多关于html5 touch的文章但大多都是介绍touch事件或者很简短的小demo。
比较全面的上下滑动的小demo，代码比较简单。

下面是完整代码，我把几个重要的地方做了红色标记

XML/HTML Code 复制内容到剪贴板 <!doctype html>   < html   lang = "en" >    < head >         < meta   charset = "UTF-8" >         < meta   name = "viewport"   content = "width=device-width,initial-scale=1 user-scalable=0" />         < title > 2014-4-29 </ title >         < style >        * {margin: 0;  padding: 0;}        #outer{ width:90%; height: 490px; background: #000; margin: auto;  overflow: hidden;}        #inner{width:80%; height: 2000px; background: #f67d42; margin: auto; position:relative; top:0;  }         </ style >         < script   src = 'jquery-1.9.1.min.js' > </ script >    </ head >    < body >       < div   id = "spText" > </ div >         < div   id = "outer" >             < div   id = "inner" >            123 < br >         123 < br >     gag < br >  af < br >  123 < br >  123 < br >  123 < br >  123 < br >  123 < br >  123 < br >  123 < br >  123 < br >  123 < br >  123 < br >  123 < br >  yryyr < br >  ryry < br >  123 < br >  123 < br >  123 < br >  123 < br >  123 < br >  sdff < br >  fef < br >  123 < br >  hr < br >  hrh < br >  5y < br >  123 < br >  er < br >  ert < br >  123 < br >  rgdgdg < br >  123 < br >  123 < br >  123 < br >  123 < br >  123 < br >  123 < br >  gfgfgfgfgfgf < br >  sdsdsdsdsdsd < br >  sf < br >  123 < br >  123 < br >  123 < br >  123 < br >  123 < br >  123 < br >  123 < br >  123 < br >  gdggdgdg < br >  123 < br >  drgdrgd < br >  123 < br >  123 < br >  123 < br >  yuyuyuyuyuy < br >  hjkhjkhkhkhjkhkh < br >  kjkjk < br > 123 < br >       123 < br >     gag < br >  af < br >  123 < br >  123 < br >  123 < br >  123 < br >  123 < br >  123 < br >  123 < br >  123 < br >  123 < br >  123 < br >  123 < br >  yryyr < br >  ryry < br >  123 < br >  123 < br >  123 < br >  123 < br >  123 < br >  sdff < br >  fef < br >  123 < br >  hr < br >  hrh < br >  5y < br >  123 < br >  er < br >  ert < br >  123 < br >  rgdgdg < br >  123 < br >  123 < br >  123 < br >  123 < br >  123 < br >  123 < br >  gfgfgfgfgfgf < br >  sdsdsdsdsdsd < br >  sf < br >  123 < br >  123 < br >  123 < br >  123 < br >  123 < br >  123 < br >  123 < br >  123 < br >  gdggdgdg < br >  123 < br >  drgdrgd < br >  123 < br >  123 < br >  123 < br >  yuyuyuyuyuy < br >  hjkhjkhkhkhjkhkh < br >  kjkjk < br >                    </ div >         </ div >            < script >            var startX,//触摸时的坐标                startY,                 x, //滑动的距离                 y,                  aboveY = 0 ; //设一个全局变量记录上一次内部块滑动的位置                 var  inner = document .getElementById("inner");                             function touchSatrt(e){//触摸                    e.preventDefault();                    var  touch = e .touches[0];                     startY  =  touch .pageY;   //刚触摸时的坐标                              }                   function touchMove(e){//滑动                               e.preventDefault();                             var   touch  =  e .touches[0];                                     y  =  touch .pageY - startY;//滑动的距离                    // inner.style.webkitTransform  =  'translate('    0  'px, '   y   'px)';  //也可以用css3的方式                          inner.style.top = aboveY y "px"; //这一句中的aboveY是inner上次滑动后的位置                                   }                     function touchEnd(e){//手指离开屏幕                  e.preventDefault();                                      aboveY = parseInt (inner.style.top);//touch结束后记录内部滑块滑动的位置 在全局变量中体现 一定要用parseInt()将其转化为整数字;                   }//                 document.getElementById("outer").addEventListener('touchstart', touchSatrt,false);                   document.getElementById("outer").addEventListener('touchmove', touchMove,false);                   document.getElementById("outer").addEventListener('touchend', touchEnd,false);           </ script >    </ body >       </ html >   

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：http://imgbuyun.weixiu-service.com/up79/202309/fgmuireagni.html