iOS触摸设备'；通过Javascript创建s视口x/y坐标

我目前正在为iPhone开发一个网页，其中包含一个用户可以触摸和拖动的DIV元素。此外，当用户将元素拖动到设备屏幕的顶部或底部时，我希望自动向上或向下滚动页面

我遇到的问题是试图确定一个可靠的公式来获取onTouchMove事件中的坐标，该事件会在用户的手指到达设备视口的顶部或底部时响应。我目前的公式似乎很乏味，我觉得可能有一种更简单的方法可以做到这一点

确定触摸事件是否已到达屏幕底部的当前公式：

function onTouchMoveHandler(e)
{
    var orientation=parent.window.orientation;
    var landscape=(orientation==0 || orientation==180)?true:false;
    var touchoffsety=(!landscape?screen.height - (screen.height - screen.availHeight):screen.width - (screen.width - screen.availWidth)) - e.touches[0].screenY + (window.pageYOffset * .8);
    if(touchoffsety < 40) alert('finger is heading off the bottom of the screen');
}

函数onTouchMoveHandler（e）
{
var-orientation=parent.window.orientation；
变量横向=（方向==0 | |方向==180）？真：假；
var touchoffsety=（！横向？screen.height-（screen.height-screen.availHeight）：screen.width-（screen.width-screen.availWidth））-e.touch[0].screenY+（window.pageYOffset*.8）；
如果（touchoffsety<40）警报（“手指离开屏幕底部”）；
}

---

我对窗口、文档、主体、e.touch等对象进行了一些Javascript反射，看看是否可以找到一组数字，这些数字的总和总是等于屏幕的顶部或底部，但没有可靠的成功。非常感谢您的帮助。

假设无论当前滚动位置如何，触摸屏的

屏幕y

字段保持相对于屏幕顶部的y坐标，您当前的计算对我来说没有多大意义。我希望我没有误解你的意图

为了确定触摸是否接近设备的顶部或底部，我首先要检查screenY是否接近顶部（顶部为0），因为您可以直接使用该值。然后，如果它不接近顶部，计算它离底部有多近，并进行检查

var touch = e.touches[0];
if (touch.screenY < 50)
{
    alert("Closing in on Top");
}
else //Only do bottom calculations if needed
{
    var orientation=parent.window.orientation;
    var landscape=(orientation==0 || orientation==180)?true:false;
    //height - (height - availHeight) is the same as just using availHeight, so just get the screen height like this
    var screenHeight = !landscape ? screen.availHeight : screen.availWidth;
    var bottomOffset = screenHeight - touch.screenY; //Get the distance of the touch from the bottom
    if (bottomOffset < 50)
        alert("Closing in on Bottom");
}

var-touch=e.touch[0]；
如果（触摸屏<50）
{
警报（“接近顶部”）；
}
else//仅在需要时进行底部计算
{
var-orientation=parent.window.orientation；
变量横向=（方向==0 | |方向==180）？真：假；
//高度-（height-availHeight）与仅使用availHeight相同，因此只需获得如下屏幕高度
变量screenHeight=！横向？screen.availHeight:screen.availWidth；
var bottomOffset=screenHeight-touch.screenY；//获取触摸到底部的距离
如果（底部偏移<50）
警报（“接近底部”）；
}

这其实还不错。您还可以使用Zepto.js及其内置的touch events和

.offset（）

方法来简化操作：

---

然而，我很想知道你是否真的能让它在底部滚动，以及它的性能是否足够平滑，使效果值得。（经常在iOS中滚动会很难中断JavaScript）

这是我遇到的问题之一。有人会认为screenY是你所需要的一切，但事实并非如此。一个原因是，如果您有两个iFrame，并且正在底部iFrame中拖动一个DIV，那么数字似乎会根据您当前滚动的距离而倾斜。这就是window.pageYOffset发挥作用的地方，它告诉我们浏览器窗口向下滚动了多远。但这取决于滚动到的位置，它似乎超出或低于正确的补偿量。这就是为什么我用0.8乘以它，但它仍然很挑剔。你试过clientY吗？也许这对你也有帮助：当我在新年后回到办公室时，我会试试你提到的那篇文章。这看起来很有希望。事实上，这可能是一个bug，这家伙可能已经发现了这个bug以及如何解决它…这篇文章没有任何帮助。但你可能对screenY有所了解。我现在正在用iPad进行测试，发现screenY是浏览器顶部地址栏末端的屏幕坐标。如果触摸地址栏或地址栏上方，实际上会得到一个负屏幕值。screen.availHeight包含地址栏的大小，这让我很难过。但是，我发现window.outerHeight不包括地址栏。因此公式window.outerHeight-touch.screenY似乎可以找到接近底部的触摸。明天我将测试iphone。我让它在iPad1上使用window.outerHeight-touch.screenY<40运行得很好。通过将.scrollTop参数设置为每次递增20像素，我使用了20毫秒的setTimeout滚动。我还移动了你手指所持的div，移动量相同，这样背景滚动时它看起来不会移动。这是一个链接，它深入解释了不同的移动平台和Javascript变量，这些变量描述了视口维度，以及它们之间的差异。这帮助我找到了答案：