html5 touch事件实现触屏页面上下滑动

百变鹏仔 2个月前 (10-18) #H5教程

文章标签事件

这篇文章主要为大家详细介绍了html5 touch事件实现触屏页面上下滑动的相关代码，代码注释很清楚，感兴趣的小伙伴们可以参考一下

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

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

<!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=&#39;jquery-1.9.1.min.js&#39;></script>  </head>  <body>    <p id="spText"></p>      <p id="outer">          <p 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>                 </p>      </p>        <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 = &#39;translate(&#39; + 0+ &#39;px, &#39; + y + &#39;px)&#39;;  //也可以用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(&#39;touchstart&#39;, touchSatrt,false);                  document.getElementById("outer").addEventListener(&#39;touchmove&#39;, touchMove,false);                  document.getElementById("outer").addEventListener(&#39;touchend&#39;, touchEnd,false);         </script>  </body>    </html>

文章推荐

html5 touch事件实现触屏页面上下滑动

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集