iOS通过Javascript对设备的viewport x/y坐标进行触摸。

时间：2022-01-28 21:19:50

I am currently developing a webpage for an iPhone which contains a DIV element that the user can touch and drag around. In addition, when the user drags the element to the top or bottom of the device's screen, I want to automatically scroll the page up or down.

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

The problem I am having is trying to determine a reliable formula to get the coordinates in the onTouchMove event that coorespond with the user's finger reaching the top or the bottom of the device viewport. My current formula seems tedious and I feel there may be an easier way to do this.

我遇到的问题是试图确定一个可靠的公式来获得onTouchMove事件中的坐标，该事件与用户的手指一起到达设备视图端口的顶部或底部。我现在的公式看起来很乏味，我觉得可能有更简单的方法。

My current formula to determine if the touch event has reached the bottom of the screen:

我目前用来确定触摸事件是否已经到达屏幕底部的公式:

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

I have done a bit of Javascript reflection on objects such as the window, document, body, e.touches to see if I could find a set of numbers that would always add up to equal the top or bottom of the screen, but without reliable success. Help with this would be greatly appreciated.

我已经对对象(如窗口、文档、主体、e)做了一些Javascript反射。触摸，看看我是否能找到一组数字，它们加起来总是等于屏幕的顶部或底部，但没有可靠的成功。非常感谢您的帮助。

2 个解决方案

#1

2  

Assuming the screenY field of a touch holds the y coordinate relative to the screen-top regardless of current scroll position, your current calculation does not make a whole lot of sense to me. I hope I did not misunderstand what your trying to do.

假设一个触摸的screenY字段持有相对于屏幕顶部的y坐标，而不管当前的滚动位置如何，您的当前计算对我来说没有多大意义。我希望我没有误解你的意图。

To find out if a touch is close to the top or the bottom of the device, I would first check if screenY is close to top (top being 0), since you can work with that value directly. Then, if it's not close to top, calculate how close it is to the bottom and check that.

为了查明触摸是否靠近设备的顶部或底部，我将首先检查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");
}

#2

1  

That's actually not bad. You could also use Zepto.js and its built-in touch events and .offset() method to get it a little easier:

这是不坏。你也可以使用Zepto。js和它的内置触摸事件和.offset()方法使它更容易一些:

However, I'm interested to know whether or not you actually manage to get it scrolling at the bottom, and if the performance is smooth enough to make the effect worthwhile. (frequently scrolling in iOS interrupts JavaScript really hard)

但是，我很想知道您是否真的让它在底部滚动，以及性能是否足够平滑，从而使效果值得使用。(iOS中频繁滚动会中断JavaScript)

#1

2  

Assuming the screenY field of a touch holds the y coordinate relative to the screen-top regardless of current scroll position, your current calculation does not make a whole lot of sense to me. I hope I did not misunderstand what your trying to do.

假设一个触摸的screenY字段持有相对于屏幕顶部的y坐标，而不管当前的滚动位置如何，您的当前计算对我来说没有多大意义。我希望我没有误解你的意图。

To find out if a touch is close to the top or the bottom of the device, I would first check if screenY is close to top (top being 0), since you can work with that value directly. Then, if it's not close to top, calculate how close it is to the bottom and check that.

为了查明触摸是否靠近设备的顶部或底部，我将首先检查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");
}

#2

1  

That's actually not bad. You could also use Zepto.js and its built-in touch events and .offset() method to get it a little easier:

这是不坏。你也可以使用Zepto。js和它的内置触摸事件和.offset()方法使它更容易一些:

However, I'm interested to know whether or not you actually manage to get it scrolling at the bottom, and if the performance is smooth enough to make the effect worthwhile. (frequently scrolling in iOS interrupts JavaScript really hard)

但是，我很想知道您是否真的让它在底部滚动，以及性能是否足够平滑，从而使效果值得使用。(iOS中频繁滚动会中断JavaScript)

标签：

相关文章