6

現在、ユーザーがタッチしてドラッグできる DIV 要素を含む iPhone 用の Web ページを開発しています。さらに、ユーザーが要素をデバイスの画面の上部または下部にドラッグすると、ページを自動的に上下にスクロールしたいと考えています。

私が抱えている問題は、デバイスのビューポートの上部または下部に到達するユーザーの指に対応する 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 に答える