Home > Article > Web Front-end > HTML5 touch event realizes sliding up and down of touch screen page

HTML5 touch event realizes sliding up and down of touch screen page

不言Original: 2018-06-25 17:46:583469browse

This article mainly introduces in detail the code related to the html5 touch event to realize the up and down sliding of the touch screen page. The code comments are very clear. Interested friends can refer to what

has done recently. The app project caused many problems due to the use of overflow:hidden, so I decided to study the touch event of html5. It is difficult to find a comprehensive post. Although there are many articles about html5 touch, most of them introduce touch events or very short demos.
A relatively comprehensive small demo of sliding up and down, the code is relatively simple.

The following is the complete code. I have marked several important places in red

<!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>

The above is the entire content of this article. I hope it will be helpful to everyone's study. , please pay attention to the PHP Chinese website for more related content!

Related recommendations:

html5 and CSS realize the prohibition of IOS long press copy and paste function

HTML5 and jQuery realize pop-up creativity Search box layer method

html5 and css3 and jquery to implement the music player

The above is the detailed content of HTML5 touch event realizes sliding up and down of touch screen page. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML5 and CSS implement disabling IOS long press copy and paste functionNext article：HTML5 and CSS implement disabling IOS long press copy and paste function

See more

HTML5 touch event realizes sliding up and down of touch screen page

Related articles