web-dev-qa-db-ja.com

スワイプ時のWebページナビゲーションを無効にする（前後）

Windows Phoneでは、IE Edgeからスワイプが発生している場合、ユーザーは画面をスワイプして前後に移動できます。このOSレベルの機能は、WebページのUXを妨げています。

それを無効にすることができるjsまたはcssはありますか？いくつかのハックも行います。

WindowsphoneのWebサイトからのスナップショット： enter image description here

リファレンスページへのリンクは次のとおりです。 http://www.windowsphone.com/en-in/how-to/wp8/basics/gestures-swipe-pan-and-stretch

水平スクロールにはtouchactionを有効にする必要があることに注意してください。

javascriptcssinternet-explorerwindows-phone-8windows-phone-8.1
38
Shekhar Joshi

このJavaScriptをコピーして貼り付けます：

_var xPos = null;
var yPos = null;
window.addEventListener( "touchmove", function ( event ) {
    var touch = event.originalEvent.touches[ 0 ];
    oldX = xPos;
    oldY = yPos;
    xPos = touch.pageX;
    yPos = touch.pageY;
    if ( oldX == null && oldY == null ) {
        return false;
    }
    else {
        if ( Math.abs( oldX-xPos ) > Math.abs( oldY-yPos ) ) {
            event.preventDefault();
            return false;
        }
    }
} );
_

縮小する場合は、これをコピーして貼り付けます。

var xPos=null;var yPos=null;window.addEventListener("touchmove",function(event){var touch=event.originalEvent.touches[0];oldX=xPos;oldY=yPos;xPos=touch.pageX;yPos=touch.pageY;if(oldX==null && oldY==null){return false;}else{if(Math.abs(oldX-xPos)>Math.abs(oldY-yPos)){event.preventDefault();return false;}}});

6
clickbait

スワイプイベントのデフォルトアクションを防止する方法はありますか。 document.readyのどこかに追加します（この例ではdocument.readyを含めましたが、追加する必要があるのは関数のみです）。

$(document).ready(function(){ $(window).on('touchmove',function(e){e.preventDefault();}); });

この場合、イベントは「touchmove」と呼ばれると思いますが、これを拡張してtouchstart/touchendのデフォルトの動作も無視する必要があるかもしれませんが、100％確信はありません。

0
clovola

このCodepen David Hillによるチェックアウト。

var elem = document.getElementById("container"); //area we don't want touch drag

var defaultPrevent=function(e){e.preventDefault();}
elem.addEventListener("touchstart", defaultPrevent);
elem.addEventListener("touchmove" , defaultPrevent);

これは実際にオブジェクトを構築するクールな方法だと思います。

0
Jordan Nakamoto

これは、左にスワイプして後方に移動するように構成したMacユーザーにとっても問題です。この設定を無効にすることはできませんが、ユーザーに別の場所に移動することを確認するように求めることができます https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload 。

0
tommyTheHitMan