iOS通过Javascript获取设备视口的x/y坐标信息

Question

iOS通过Javascript获取设备视口的x/y坐标信息

6

我目前正在开发一个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');
}

我已经在诸如window、document、body、e.touches等对象上进行了一些Javascript反射，以寻找一个始终相加等于屏幕顶部或底部的数字集，但没有可靠的成功。希望能够得到关于此问题的帮助。

- Brain2000

这里有一个链接，详细解释了不同移动平台和描述视口尺寸的Javascript变量，以及它们之间可能存在的差异。这对我帮助很大：http://tripleodeon.com/2011/12/first-understand-your-screen/ - Brain2000

2个回答

1

这其实不错。你也可以使用 Zepto.js 和它内置的触摸事件以及 .offset() 方法来更轻松地实现：

然而，我很想知道你是否真的成功让它在底部滚动，并且性能是否足够流畅，使效果值得。（在iOS中频繁滚动会严重干扰JavaScript）

- hunterloftis

我已经在iPad 1上使用window.outerHeight - touch.screenY < 40使其运行得相当不错。我使用了一个20毫秒的setTimeout，通过每次增加20像素来设置.scrollTop参数进行滚动。我还通过相同的量移动您手指所持有的div，以便它在背景滚动时看起来不会移动。实际性能非常流畅。 - Brain2000

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Wutz · Accepted Answer

假设触摸事件中的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");
}