Отключить навигацию по веб-страницам при прокрутке (назад и вперед)

На телефоне Windows в IE пользователи могут вернуться назад и вперед, прокручивая экран, если салфетка идет от края. Эта функциональность уровня ОС мешает моей веб-странице UX.

Есть ли какие-либо js или css, которые могут отключить это? Некоторые хаки также будут делать.

Снимок с сайта Windows Phone:

Вот ссылка на справочную страницу: http://www.windowsphone.com/en-in/how-to/wp8/basics/gestures-swipe-pan-and-stretch

Обратите внимание, что для горизонтальной прокрутки мне все равно требуется touchaction.

Ответ 1

Скопируйте и вставьте этот 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;}}});

Ответ 2

Как насчет предотвращения действия по умолчанию для события салфетки. Где-то в вашем документе. Уже добавьте (обратите внимание, что я включил document.ready в этом примере, нужно добавить только функцию):

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

В этом случае я считаю, что событие называется "touchmove", вам может понадобиться расширить его, чтобы также игнорировать поведение по умолчанию touchstart/touchhend, но я не уверен на 100%.

Ответ 3

Это также проблема для пользователей Mac, которые настроили прокрутку влево для перемещения назад. Вы не можете отключить этот параметр, но вы можете попросить пользователя подтвердить, что они намеревались перейти от https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload.

Ответ 4

*{
    -webkit-touch-callout: none;
}

Результатом является полное деактивация любых событий касания

Ответ 5

Это должно предотвратить навигацию при прокрутке

@media screen and (-ms-high-contrast: none) {
    html {
        overflow-x: scroll;
        -ms-touch-action: none; 
        -ms-overflow-style: none;
        -ms-scroll-chaining: none; 
    }
}