Javascript touchEvents打破了iPad上的垂直滚动

我离完美的效果已经很近了，但是我在路上遇到了一个小碰撞

我有一个带有main div（#message viewer）的消息传递系统，其中包含一个消息线程。我想说的是，当用户在iPad上观看时，向右滑动（在这个div内的任何地方），消息查看器从屏幕上滑下，div2从屏幕的左侧进入

• 好消息：iPad上的效果平滑且反应灵敏。来自Padalicious的Javascript就像一个符咒

• 问题：
  • 当效果打开时，我的其他jQuery函数不起作用（例如，打开新div的按钮）
  • 垂直滚动不起作用=(
• 我试过：
  • 在#swipeBox上的CSS中，我尝试了所有[overflow:]选项来启用滚动
  • 我已经尝试将[ontouchstart=”“]附加到单独的div，而不是创建一个新div。没有bueno

我希望这是有意义的…我已经附加了我的代码。我想这个恶意代码可能会干扰Y滚动

谢谢你的帮助

HTML

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");
            }
        }

var triggerElementID=null；//此变量用于标识触发元素
var-fingerCount=0；
var startX=0；
var-startY=0；
var-curX=0；
var-curY=0；
增值税=0；
var-deltaY=0；
var-horzDiff=0；
var-vertDiff=0；
var minLength=72；//用户可以滑动的最短距离
var swipeLength=0；
var swipeAngle=null；
var swipeDirection=null；
//4个触摸事件处理程序
//注意：touchStart处理程序还应接收触发元素的ID
//确保在元素声明中放置的事件调用中传递其ID，如：
// 
函数touchStart（事件，passedName）{
//禁用选择触摸对象的标准功能
event.preventDefault（）；
//获取触摸屏幕的手指总数
fingerCount=event.touchs.length；
//因为我们寻找的是一个滑动（单指）而不是一个手势（多指），
//检查是否只使用了一根手指
如果（fingerCount==2）{
//获取触摸的坐标
startX=event.touchs[0].pageX；
startY=event.touchs[0].pageY；
//存储触发元素ID
triggerElementID=passedName；
}否则{
//多个手指被触碰，所以取消
触摸取消（事件）；
}
}
功能触摸移动（事件）{
event.preventDefault（）；
if（event.touchs.length==2）{
curX=event.touchs[0].pageX；
curY=event.touchs[0].pageY；
}否则{
触摸取消（事件）；
}
}
函数touchEnd（事件）{
event.preventDefault（）；
//检查是否使用了多个手指，以及是否有结束坐标
如果（fingerCount==2&&curX！=0）{
//使用距离公式确定滑动的长度
swipeLength=Math.round（Math.sqrt（Math.pow（curX-startX，2）+Math.pow（curY-startY，2））；
//如果用户刷卡超过最小长度，请执行相应的操作
如果（瑞士长度>=最小长度）{
caluculateAngle（）；
确定方向（）；
处理例程（）；
touchCancel（事件）；//重置变量
}否则{
触摸取消（事件）；
}   
}否则{
触摸取消（事件）；
}
}
功能触摸取消（事件）{
//将变量重置回默认值
指数=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；
}
函数caluculateAngle（）{
var X=startX curX；
var Y=curY startY；
var Z=Math.round（Math.sqrt（Math.pow（X，2）+Math.pow（Y，2））；//距离-四舍五入-以像素为单位
var r=Math.atan2（Y，X）；//以弧度表示的角度（笛卡尔坐标系）
swipeAngle=Math.round（r*180/Math.PI）；//角度（度）
如果（swipeAngle<0）{swipeAngle=360-Math.abs（swipeAngle）；}
}
函数determineSwipeDirection（）{
如果（（旋转角度=0））{
swipeDirection='左'；
}否则如果（（旋转角度=315））{
swipeDirection='左'；
}如果（（swipeAngle>=135）&（swipeAngleevent.preventDefault（）；

阻止滚动

event.preventDefault（）；阻止滚动

#swipeBox {

width: 100%;
height: auto;

}

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");
            }
        }