I wrote a page to swipe up and down the page, and when I put my finger in the div range with content in the middle, I disabled the touchmove event, using {
//
e.preventDefault()
//
e.stopPropagation()
e.nativeEvent.stopImmediatePropagation();} but the scroll bar of the div (the one with content) in the middle cannot be scrolled on the mobile phone. It can be scrolled on the PC. Excuse me, God, how to solve this? The code is as follows:
< html >
< head >
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="/include/zenkee.js"></script>
<script>
var PageSlide;
function Page_Load() {
Loadpage();
showdatail();
}
function changeMusic() {
if (document.getElementById("btnMusic").getAttribute("alt") == "") {
document.getElementById("emb").pause();
document.getElementById("btnMusic").setAttribute("alt", "");
} else {
document.getElementById("emb").play();
document.getElementById("btnMusic").setAttribute("alt", "");
}
}
function showdatail() {
$.json("/user/jsonSchoolById.asp?s_id=" + <-sharpQS:id> , function (o) {
for (var i = 0; i < o.length; iPP) {
$("park").innerHTML = o[i].park;
$("about").innerHTML = o[i].about;
$("address").innerHTML = o[i].address;
$("purpose").innerHTML = o[i].purpose;
$("target").innerHTML = o[i].target;
$("object").innerHTML = o[i].object;
$("time").innerHTML = o[i].s_time + "-" + o[i].e_time;
$("slogan").innerHTML = o[i].slogan;
$("enrolment_class").innerHTML = o[i].enrolment_class;
$("promise").innerHTML = o[i].promise;
$("charges").innerHTML = o[i].charges;
document.getElementsByClassName("s_picture")[0].src = "http://8010.suyou188.com/p.asp?file=" + o[i].s_picture;
document.getElementsByClassName("s_picture")[1].src = "http://8010.suyou188.com/p.asp?file=" + o[i].s_picture;
document.getElementsByClassName("s_picture")[2].src = "http://8010.suyou188.com/p.asp?file=" + o[i].s_picture;
document.getElementById("pictures").src = "http://8010.suyou188.com/p.asp?file=" + o[i].pictures;
document.getElementsByClassName("contacts")[0].innerHTML = o[i].contacts;
document.getElementsByClassName("contacts")[1].innerHTML = o[i].contacts;
document.getElementsByClassName("phone")[0].innerHTML = o[i].phone;
document.getElementsByClassName("phone")[1].innerHTML = o[i].phone;
}
});
}
/* div*/
function addBan() {
var odiv = document.querySelector(".center");
var widthpoor = odiv.getBoundingClientRect().right - odiv.getBoundingClientRect().left;
var heightpoor = odiv.getBoundingClientRect().bottom - odiv.getBoundingClientRect().top;
var page = new PageSlide(document.querySelector(".pages"), "Y", "");
//var pageTart=new page.touchstart(page);
alert(page.current);
}
function sbmChk() {
if ((_fm.name.value = _fm.name.value.trim()).length == 0) {
alert("");
_fm.name.focus();
return false;
}
if ((_fm.name.value = _fm.name.value.trim()).length == 0) {
alert("");
_fm.name.focus();
return false;
}
if ((_fm.name.value = _fm.name.value.trim()).length == 0) {
alert("");
_fm.name.focus();
return false;
}
if ((_fm.name.value = _fm.name.value.trim()).length == 0) {
alert("");
_fm.name.focus();
return false;
}
if ((_fm.name.value = _fm.name.value.trim()).length == 0) {
alert("");
_fm.name.focus();
return false;
}
document.form.action = "/user/getAddApply.asp?s_id=" + <-sharpQS:id> ;
return true;
}
function excessive() {
}
/* */
function Loadpage() {
/* PageSlide:,,*/
PageSlide = function (el, swipe, options) {
this.options = options || {} //
this.current = 0 //
this.pageX //
this.pageY //
this.height //
this.width //
this.flag //
this.move //
this.$el = el //
this.swipe = swipe || "X" //
this.resize().init().bindEvents() //
}
/*translate3d*/
PageSlide.prototype.setX = function (el, x, unit) {
el && (el.style.webkitTransform = "translate3d(" + x + (unit || "px") + ",0,0)")
}
PageSlide.prototype.setY = function (el, y, unit) {
el && (el.style.webkitTransform = "translate3d(0," + y + (unit || "px") + ",0)")
}
/**/
PageSlide.prototype.init = function (i) {
var current = i ? this.$el.children[i] : this.$el.firstElementChild
//
if (!current) throw "ERROR";
//moving,
current.classList.add("moving")
//
current.style.webkitTransform = "translate3d(0,0,0)"
//swipe
for (var i = 1; i < this.$el.children.length; iPP) {
this["set" + this.swipe](this.$el.children[i], (this.swipe === "X" ? this.width : this.height))
}
setTimeout(function () {
current.classList.remove("moving")
current.classList.add("play")
}, 3e2)
return this
}
/**/
PageSlide.prototype.bindEvents = function () {
var self = this
window.addEventListener("resize orientationchange", this.resize.bind(this), false)
"touchstart touchmove touchend touchcancel".split(" ").forEach(function (evn) {
//
self.$el.addEventListener(evn, self[evn].bind(self), false)
})
}
/* translate3d0*/
PageSlide.prototype.setCurrent = function (el, i) {
//
el && (el.style.webkitTransform = "translate3d(0,0,0)")
if (i) {
//
this.current = i
//
this.$current = this.$el.children[i]
}
}
/**/
PageSlide.prototype.getCurrent = function () {
return this.$el.children[this.current]
}
/**/
PageSlide.prototype.resize = function () {
this.width = this.$el.parentNode.clientWidth
this.height = this.$el.parentNode.clientHeight
return this
}
/*random()*/
PageSlide.prototype.random = function () {
//
var count = this.$el.children.length
var current = this.current
var arr = []
var num
for (var i = 0; i < count; iPP) {
//
if (i !== current) arr.push(i.toString())
}
//
num = Math.floor(Math.random() * arr.length)
//
this.direct(+arr[num])
}
/* ,*/
PageSlide.prototype.touchstart = function (e) {
//pagestoucherstouchertoucher
var touches = e.touches[0]
//
this.flag = null
this.move = 0
//XY
if (this.current !== 0) {
//div
var odiv = document.getElementsByClassName("center")[this.current - 1];
//divtouch
if (touches.pageX>=odiv.getBoundingClientRect().left && touches.pageX<=odiv.getBoundingClientRect().right && touches.pageY>=odiv.getBoundingClientRect().top && touches.pageY<=odiv.getBoundingClientRect().bottom){
this.pageX=0;
this.pageY=0;
}else{
this.pageX = touches.pageX
this.pageY = touches.pageY
}
}else{
this.pageX = touches.pageX
this.pageY = touches.pageY
}
}
/* */
PageSlide.prototype.touchmove = function (e) {
var touches = e.touches[0]
if (this.current !== 0) {
//div
var odiv = document.getElementsByClassName("center")[this.current - 1];
//divtouch
if (touches.pageX>=odiv.getBoundingClientRect().left && touches.pageX<=odiv.getBoundingClientRect().right && touches.pageY>=odiv.getBoundingClientRect().top && touches.pageY<=odiv.getBoundingClientRect().bottom){
//
e.preventDefault()
//
e.stopPropagation()
e.nativeEvent.stopImmediatePropagation();
odiv.addEventListener("touchmove",function(e){e.returnValue = true;}, false);
}else if(this.pageX===0&&this.pageY===0){
//
e.preventDefault()
//
e.stopPropagation()
e.nativeEvent.stopImmediatePropagation();
odiv.addEventListener("touchmove",function(e){e.returnValue = true;}, false);
} else {
//XY
var X = touches.pageX - this.pageX
var Y = touches.pageY - this.pageY
//
var current = this.getCurrent()
//
var next = current.nextElementSibling
var prev = current.previousElementSibling
//
if (!this.flag) {
//
this.flag = Math.abs(X) > Math.abs(Y) ? "X" : "Y"
if (this.flag === this.swipe) {
//
current.classList.add("moving")
next && next.classList.add("moving")
prev && prev.classList.add("moving")
}
}
//
if (this.flag === this.swipe) {
//
e.preventDefault()
//
e.stopPropagation()
switch (this.swipe) {
case "X":
//swipe horizontal
this.move = X
this.setX(current, X)
//set
next && (this.setX(next, X + this.width))
prev && (this.setX(prev, X - this.width))
break;
case "Y":
//swipe vertical
this.move = Y
this.setY(current, Y)
//set
next && (this.setY(next, Y + this.height))
prev && (this.setY(prev, Y - this.height))
break;
}
}
}
} else {
var touches = e.touches[0]
//XY
var X = touches.pageX - this.pageX
var Y = touches.pageY - this.pageY
//
var current = this.getCurrent()
//
var next = current.nextElementSibling
var prev = current.previousElementSibling
//
if (!this.flag) {
//
this.flag = Math.abs(X) > Math.abs(Y) ? "X" : "Y"
if (this.flag === this.swipe) {
//
current.classList.add("moving")
next && next.classList.add("moving")
prev && prev.classList.add("moving")
}
}
//
if (this.flag === this.swipe) {
//
e.preventDefault()
//
e.stopPropagation()
switch (this.swipe) {
case "X":
//swipe horizontal
this.move = X
this.setX(current, X)
//set
next && (this.setX(next, X + this.width))
prev && (this.setX(prev, X - this.width))
break;
case "Y":
//swipe vertical
this.move = Y
this.setY(current, Y)
//set
next && (this.setY(next, Y + this.height))
prev && (this.setY(prev, Y - this.height))
break;
}
}
}
}
/* */
PageSlide.prototype.touchend = function (e) {
//
var minRange = 50
var move = this.move
//
var current = this.getCurrent()
//
var next = current.nextElementSibling
var prev = current.previousElementSibling
//
current.classList.remove("moving")
next && next.classList.remove("moving")
prev && prev.classList.remove("moving")
if (!this.flag) return
//
e.preventDefault()
//,next()go()
if (move < -minRange && next) return this.next()
if (move > minRange && prev) return this.prev()
//
this.reset()
}
/* */
PageSlide.prototype.touchcancel = function (e) {
//
var current = this.getCurrent()
var next = current.nextElementSibling
var prev = current.previousElementSibling
//
current.classList.remove("moving")
next && next.classList.remove("moving")
prev && prev.classList.remove("moving")
//
this.reset()
}
/* go()*/
PageSlide.prototype.next = function () {
this.go(this.current + 1)
}
PageSlide.prototype.prev = function () {
this.go(this.current - 1)
}
/* ,*/
PageSlide.prototype.reset = function () {
var width = this.width
var height = this.height
var swipe = this.swipe
var current = this.getCurrent()
var prev = current.previousElementSibling
var next = current.nextElementSibling
this.setCurrent(current)
prev && (this["set" + swipe](prev, -(swipe === "X" ? width : height)))
next && (this["set" + swipe](next, swipe === "X" ? width : height))
}
/* go*/
PageSlide.prototype.go = function (i) {
var onFinish = this.options.onFinish
var current = this.getCurrent()
//
var total = this.$el.childElementCount
var target = this.$el.children[i]
var d = i < this.current ? -1 : 1
if (i === this.current || i < 0 || i >= total) return
if (onFinish && (typeof onFinish === "function")) onFinish.call(this, i)
//
typeof this.options.tranSetionEnd === "function" && this.options.tranSetionEnd.call(this)
this.current = i
this["set" + this.swipe](current, -d * (this.swipe === "X" ? this.width : this.height))
this.setCurrent(target, i)
this.finish(current, target)
}
/* .play.play*/
PageSlide.prototype.finish = function (curr, target) {
this.flag = null
setTimeout(function () {
curr && curr.classList.remove("play")
target && target.classList.add("play")
}, 3e2)
}
PageSlide.prototype.direct = function (i) {
if (i && typeof (i) === "number") {
this.go(i)
for (var j = 0; j < i; jPP) {
this["set" + this.swipe](this.$el.children[j], -1 * (this.swipe === "X" ? this.width : this.height))
}
} else return
}
//
document.addEventListener("touchmove", function (e) {
e.preventDefault()
})
/* */
var pages = new PageSlide(document.querySelector(".pages"), "Y", {
tranSetionEnd: function () {
console.log(this.current);
}
})
}
</script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
font-family: "Arial", "Microsoft YaHei", "", "", sans-serif;
}
.pages {
width: 100%;
height: 100%;
position: relative;
background: -sharpFFF;
}
.page {
font-size: 22px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
transform: translate3d(0px, 100%, 0px);
-webkit-transform: translate3d(0px, 100%, 0px);
-moz-transform: translate3d(0px, 100%, 0px);
transition: transform .5s ease-out;
-webkit-transition: -webkit-transform .5s ease-out;
-moz-transition: -moz-transform .5s ease-out;
background-image: url(<-sharpPATH>.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
@-webkit-keyframes move {
100% {
-webkit-transform: translate3d(150px, 0, 0);
transform: translate3d(150px, 0, 0);
-ms-transform: translate3d(150px, 0, 0);
}
}
/**/
.rotate {
width: 50px;
height: 50px;
border-radius: 25px;
position: fixed;
background-image: url(<-sharpPATH>.png);
background-repeat: no-repeat;
background-size: 100% 100%;
top: 15;
left: 8;
display: inline-block;
-webkit-animation: rotate 5s linear;
animation: rotate 5s linear;
animation-iteration-count: 999999;//
-webkit-animation-iteration-count: 999999;
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg)
}
}
.xiangxiatishi {
position: fixed;
bottom: 20px;
left: 50%;
-webkit-transform: translateX(-50%);
-webkit-animation: dong 1s linear 0s infinite alternate;
}
.top {
width: 70%;
height: 25%;
margin: 0 auto;
background-color: rgba(0, 0, 0, 0);
text-align: center;
}
.center {
width: 80%;
height: 35%;
margin: 0 auto;
background-color: -sharpFFF;
border-radius: 15px;
overflow-y:scroll;
}
</style>< / head >
< body >
<audio src="include/.mp3" autoplay="autoplay" loop="true" id=emb></audio>
<div class="pages">
<div class="page page1">
<div id=btnMusic alt="" class="rotate" onclick=changeMusic()></div>
<!-- <a onclick=changeMusic()><img src="<-sharpPATH>.png" id=btnMusic alt="" class="btnMusic" ></a> -->
<div style="margin-top:20%;margin-left:8%;width:60%;height:55%;background:url(<-sharpPATH>yuncai.png);background-repeat: no-repeat;background-size: 100% 100%;">
<table style=";width:100%;height:95%;text-align:center;font-size:24px;color:-sharp58B8FE;">
<tr>
<td>
<div onclick="" style="padding-top:5%;"></div>
</td>
</tr>
<tr>
<td>
<div onclick=""></div>
</td>
</tr>
<tr>
<td>
<div onclick=""></div>
</td>
</tr>
<tr>
<td>
<div onclick=""></div>
</td>
</tr>
</table>
</div>
</div>
<div class="page page2">
<div class=top>
<h2 style="padding-top:50px;"></h2>
</div>
<div class=center>
<table width="90%">
<tr>
<td id=park colspan=2></td>
</tr>
<tr>
<td id=about colspan=2></td>
</tr>
<tr>
<td colspan=2>
<img style="width:100%;" class=s_picture />
</td>
</tr>
<tr>
<td>:</td>
<td id=address></td>
</tr>
<tr>
<td>:</td>
<td class=contacts></td>
</tr>
<tr>
<td>:</td>
<td class=phone></td>
</tr>
</table>
</div>
</div>
<div class="page page3">
<div class=top>
<h2 style="padding-top:50px;"></h2>
</div>
<div class=center>
<table width="90%">
<tr>
<td>
<h4></h4>
</td>
</tr>
<tr>
<td id=purpose></td>
</tr>
<tr>
<td>
<h4></h4>
</td>
</tr>
<tr>
<td id=target></td>
</tr>
<tr>
<td>
<img style="width:100%;" class=s_picture />
</td>
</tr>
</table>
</div>
</div>
<div class="page page4">
<div class=top>
<h2 style="padding-top:50px;"></h2>
</div>
<div class=center>
<img style="width:100%;" class=s_picture />
</div>
</div>
<div class="page page5">
<div class=top>
<h2 style="padding-top:50px;"></h2>
</div>
<div class=center>
<table>
<tr>
<td id=slogan colspan=2></td>
</tr>
<tr>
<td>:</td>
<td id=object></td>
</tr>
<tr>
<td>:</td>
<td id=time></td>
</tr>
<tr>
<td>:</td>
<td id=enrolment_class></td>
</tr>
<tr>
<td>:</td>
<td id=promise></td>
</tr>
<tr>
<td>:</td>
<td id=charges></td>
</tr>
<tr>
<td>:</td>
<td class=contacts></td>
</tr>
<tr>
<td>:</td>
<td class=phone></td>
</tr>
<tr>
<td colspan=2>
<img style="height:100%;" id=pictures />
</td>
</tr>
</table>
</div>
</div>
<div class="page page5">
<div class=top>
<h2 style="padding-top:50px;"></h2>
</div>
<div class=center>
<form method=post name=form onsubmit="try{return sbmChk();}catch(e){alert(e.description);return false;}" ajaxdone="if($.ajax.callback()){alert("");}">
<table>
<tr>
<td>:</td>
<td>
<input name=name>
</td>
</tr>
<tr>
<td>:</td>
<td>
<input name=name>
</td>
</tr>
<tr>
<td>:</td>
<td>
<input name=guardian placeholder="">
</td>
</tr>
<tr>
<td>:</td>
<td>
<input name=address>
</td>
</tr>
<tr>
<td>:</td>
<td>
<input name=phone placeholder="">
</td>
</tr>
<tr>
<td colspan=2>
<input type=submit value=>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
<div class=xiangxiatishi></div>< / body >
< / html > 