iOS通过Javascript触摸设备的视口x/y坐标

Question

我目前正在为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');
}

我已经对窗口,文档,正文,e.touches等对象进行了一些Javascript反射,看看我是否能找到一组数字总是加起来等于屏幕的顶部或底部,但没有可靠的成功.对此的帮助将不胜感激.

Answer 1

假设screenY无论当前滚动位置如何，触摸场都保持相对于屏幕顶部的 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");
}