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

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

4

2 回答 2

2

假设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");
}
于 2012-12-28T13:21:31.923 回答
1

这其实还不错。您还可以使用 Zepto.js 及其内置的触摸事件和.offset()方法来让它更容易一些：

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

于 2013-01-03T00:46:15.390 回答