html5 touch event realizes sliding up and down the touch screen page (1)

html5 touch event realizes sliding up and down the touch screen page (1)_html5 tutorial skills

WBOY

Release： 2016-05-16 15:51:36

Original

2278 people have browsed it

The recent app project I was working on caused a lot of 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

XML/HTML CodeCopy content to clipboard

>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/>
<title>2014-4-29title>
<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 123 gag af 123 123 123 123 123 123 123 123 123 123 123 yryyr ryry 123 123 123 123 123 sdff fef 123 hr hrh 5y 123 er ert 123 rgdgdg 123 123 123 123 123 123 gfgfgfgfgfgf sdsdsdsdsdsd sf 123 123 123 123 123 123 123 123 gdggdgdg 123 drgdrgd 123 123 123 yuyuyuyuyuy hjkhjkhkhkhjkhkh kjkjk 123 123 gag af 123 123 123 123 123 123 123 123 123 123 123 yryyr ryry 123 123 123 123 123 sdff fef 123 hr hrh 5y 123 er ert 123 rgdgdg 123 123 123 123 123 123 gfgfgfgfgfgf sdsdsdsdsdsd sf 123 123 123 123 123 123 123 123 gdggdgdg 123 drgdrgd 123 123 123 yuyuyuyuyuy hjkhjkhkhkhjkhkh kjkjk
div>
div>
<script>
var startX, //Coordinates when touched
startY,
x, //sliding distance
y,
aboveY=0; //Set a global variable to record the position of the last internal block slide
var inner=document.getElementById("inner");
touch=e.touches[0];
function touchMove(e){//Slide
touch
e
= touch.pageY - startY;//Sliding distance //
= 'translate(' 0 'px, ' y 'px )'; //You can also use css3.
=aboveY y "px"; //AboveY in this sentence is The position of inner after the last slide }
function touchEnd(e){//Finger leaves the screen
e.preventDefault();
aboveY=parseInt(inner.style.top);//Record the internal slider after the touch is completed The sliding position is reflected in the global variable and must be converted into an integer using parseInt();
script>
body>
html>

The above is the entire content of this article, I hope it will be helpful to everyone’s study.

Original text:

http://www.cnblogs.com/leinov/p/3701951.html