0
私はこの効果を完璧に近づいていますが、私は道路の小さな小さなバンプに遭遇しました。Javascript touchEventsブレーク垂直スクロール
私はメッセージのスレッドを含むメインdiv（＃メッセージビューア）を持つメッセージングシステムを持っています。私が望むのは、ユーザーがiPadでこれを見て、右にスワイプすると（このdivのどこにでも）、＃メッセージビューアは画面からスライドし、＃div2は画面の左側から来る。
良いニュース：この効果は、iPad上で滑らかで反応性があります。 PadaliciousのJavascriptは魅力的な作品です。
問題：エフェクトがオンになっていると
- は、私の他のjQueryの機能が動作しない（例えば、新しいDIVを開く私のボタン）。
- 縦スクロールが機能しません！ =（私が試した
：#swipeBox上のCSSで
- が、私はすべての[オーバーフロー：]試さなかっました。。スクロールを可能にするためのオプションを何ブエノを
- 私が添付試してみました[ontouchstart =「」]の代わりに新しいものを作成する別のdivを、へ。ノーブエノ。
私は、これは理にかなって願っています...私は私のコードを添付しました。私はPaと思っています悪意のあるコードがYスクロールを妨げている可能性があります...
ありがとうございました！
HTML
<!DOCTYPE html>
<link rel="stylesheet" href="global/styles/base.css" type="text/css" />
<script src="global/js/jquery.tools.min.js"></script>
<script src="global/js/jquery.min.js"></script>
<script src="global/js/jquery-ui.min.js"></script>
<script src="global/js/jquery-1.5.js"></script>
<script src="global/js/ipad.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0,
width=device-width, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
</head>
<body>
<div id="swipeBox" ontouchstart="touchStart(event,'message-viewer');" ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);">
<div id="content-container">
<div id="message-viewer">
// CONTENT HERE
</div>
<div class="Div2">
// CONTENT HERE
</div>
</div>
</div>
</body>
</html>
CSS
#swipeBox {
width: 100%;
height: auto;
}
JAVASCRIPT
var triggerElementID = null; // this variable is used to identity the triggering element
var fingerCount = 0;
var startX = 0;
var startY = 0;
var curX = 0;
var curY = 0;
var deltaX = 0;
var deltaY = 0;
var horzDiff = 0;
var vertDiff = 0;
var minLength = 72; // the shortest distance the user may swipe
var swipeLength = 0;
var swipeAngle = null;
var swipeDirection = null;
// The 4 Touch Event Handlers
// NOTE: the touchStart handler should also receive the ID of the triggering element
// make sure its ID is passed in the event call placed in the element declaration, like:
// <div id="picture-frame" ontouchstart="touchStart(event,'picture-frame');" ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);">
function touchStart(event,passedName) {
// disable the standard ability to select the touched object
event.preventDefault();
// get the total number of fingers touching the screen
fingerCount = event.touches.length;
// since we're looking for a swipe (single finger) and not a gesture (multiple fingers),
// check that only one finger was used
if (fingerCount == 2) {
// get the coordinates of the touch
startX = event.touches[0].pageX;
startY = event.touches[0].pageY;
// store the triggering element ID
triggerElementID = passedName;
} else {
// more than one finger touched so cancel
touchCancel(event);
}
}
function touchMove(event) {
event.preventDefault();
if (event.touches.length == 2) {
curX = event.touches[0].pageX;
curY = event.touches[0].pageY;
} else {
touchCancel(event);
}
}
function touchEnd(event) {
event.preventDefault();
// check to see if more than one finger was used and that there is an ending coordinate
if (fingerCount == 2 && curX != 0) {
// use the Distance Formula to determine the length of the swipe
swipeLength = Math.round(Math.sqrt(Math.pow(curX - startX,2) + Math.pow(curY - startY,2)));
// if the user swiped more than the minimum length, perform the appropriate action
if (swipeLength >= minLength) {
caluculateAngle();
determineSwipeDirection();
processingRoutine();
touchCancel(event); // reset the variables
} else {
touchCancel(event);
}
} else {
touchCancel(event);
}
}
function touchCancel(event) {
// reset the variables back to default values
fingerCount = 0;
startX = 0;
startY = 0;
curX = 0;
curY = 0;
deltaX = 0;
deltaY = 0;
horzDiff = 0;
vertDiff = 0;
swipeLength = 0;
swipeAngle = null;
swipeDirection = null;
triggerElementID = null;
}
function caluculateAngle() {
var X = startX-curX;
var Y = curY-startY;
var Z = Math.round(Math.sqrt(Math.pow(X,2)+Math.pow(Y,2))); //the distance - rounded - in pixels
var r = Math.atan2(Y,X); //angle in radians (Cartesian system)
swipeAngle = Math.round(r*180/Math.PI); //angle in degrees
if (swipeAngle < 0) { swipeAngle = 360 - Math.abs(swipeAngle); }
}
function determineSwipeDirection() {
if ((swipeAngle <= 45) && (swipeAngle >= 0)) {
swipeDirection = 'left';
} else if ((swipeAngle <= 360) && (swipeAngle >= 315)) {
swipeDirection = 'left';
} else if ((swipeAngle >= 135) && (swipeAngle <= 225)) {
swipeDirection = 'right';
}
}
function processingRoutine() {
var swipedElement = document.getElementById(triggerElementID);
if (swipeDirection == 'left') {
// REPLACE WITH YOUR ROUTINES
$("#message-viewer").removeClass("slideright");
$('.Div2').removeClass("slideright");
} else if (swipeDirection == 'right') {
// REPLACE WITH YOUR ROUTINES
$("#message-viewer").addClass("slideright");
$('.Div2').addClass("slideright");
}
}