e.preventDefault() вызывает сбой мобильного переполнения webkit

Я пытаюсь решить проблему, которая не давала мне покоя все выходные.

В мобильном веб-ките (в моем случае Safari iOS 5.1) я не могу поддерживать поведение -webkit-overflow-scrolling:touch, когда я помещаю в тело что-либо, что отключает поведение по умолчанию.

$('body').on({
    touchmove : function(e){
        //e.preventDefault(); // I played with these as well
        //e.stopPropagation();
        return false;
    }
});

Причина return false выше: я не хочу, чтобы тело двигалось, когда вы проводите по нему пальцем, как это происходит по умолчанию в мобильном сафари.

Fiddle 1 — сенсорное переполнение работает в среднем поле со всем текстом, но тело также перемещается, чего я не хочу: http://jsfiddle.net/MeLxg/1/

Fiddle 2 — тело теперь исправлено, возвращая false в его событии mousemove, но переполнение больше не работает, вы не можете прокручивать текстовое поле: http://jsfiddle.net/MeLxg/2/

QR-коды для вашего удобства (в конце концов, это мобильно, используйте свой сканер)

Fiddle 1 только панель просмотра http://jsfiddle.net/MeLxg/1/show/ http://jsfiddle.net/MeLxg/1/show/

Fiddle 2 только панель просмотра http://jsfiddle.net/MeLxg/2/show/ http://jsfiddle.net/MeLxg/2/show/


javascript html jquery css mobile-webkit
person tim    schedule 20.05.2013    source источник
comment
Я придурок - у меня неправильный URL. это не /view/, это /show/ - уже исправлено   -  person tim    schedule 21.05.2013
comment
Вы должны удалить этот пост, так как сомнительно, что интернализованная проблема будет кому-то полезна.   -  person OneChillDude    schedule 21.05.2013
comment
@bwheeler96, о чем ты говоришь? Это реальная проблема, и она актуальна для всех, кто заинтересован в разработке приложений для веб-клипов для iOS. Если вы хотите сохранить родное ощущение приложения, вам нужно удалить стандартное поведение сафари для смахивания тела.   -  person tim    schedule 21.05.2013
comment
Я думаю, с его точки зрения, он пытается сказать, что, поскольку это была проблема с URL-адресом, люди, у которых есть аналогичная проблема, но правильные URL-адреса, не найдут в этом помощи.   -  person Qantas 94 Heavy    schedule 21.05.2013
comment
Это то, на что я указывал, но всегда есть шанс, что я что-то упустил.   -  person OneChillDude    schedule 21.05.2013

Ответы (2)


arrow_upward
0
arrow_downward

Вам нужно будет немного изменить ситуацию. Ваш код делает именно то, что должен делать. Поскольку тело инкапсулирует любой элемент, к которому вы применяете -webkit-overflow-scrolling:touch, этот прокручиваемый div или что-то еще не сможет прокручиваться, поскольку он находится в теле. Возможно, вы можете получить аналогичный эффект, создав фиктивный элемент, просто охватывающий всю ширину и высоту устройства, который будет перехватывать любые события touchmove за пределами этого div, который вы хотите прокручивать.

http://jsfiddle.net/ericjbasti/MeLxg/3/

// added html
<div id="stopTouch"></div>


// added css 
#stopTouch{
   position: absolute;
   height: 100%; 
   width: 100%;
   background: rgba(0,0,0,.1); // just so i can see its filling the screen
}

// changed js
$('#stopTouch').on({
    touchmove : function(e){
        //e.preventDefault();
        //e.stopPropagation();
        return false;
    }
});
person ericjbasti    schedule 11.08.2013

arrow_upward
0
arrow_downward

Извините, потому что этот вопрос довольно старый. Но я пришел сюда в поисках решения, которое я только что нашел. Может быть, это помогает кому-то.

У меня была та же проблема, мне нужно было сохранить поведение preventDefault, чтобы не перемещать тело, но мне нужен был хороший -webkit-overflow-scrolling: touch; для див.

Итак, примените event.preventDefault с помощью:

<script>document.ontouchstart = function(e){ e.preventDefault(); } </script>

затем в div, который вы хотите прокрутить:

<div class="nicescrolldiv" ontouchstart="document.ontouchstart = function(e){ return true; }" ontouchend="document.ontouchstart = function(e){ e.preventDefault(); }" style=" overflow: scroll !important; -webkit-overflow-scrolling: touch !important;"></div>
person Jorge    schedule 21.01.2016