Предотвращение конфликта события touchmove с прокруткой диалогового окна пользовательского интерфейса jquery

Так как в браузере мобильного устройства, таком как Safari, когда пользователь перетаскивает экран, весь веб-сайт будет двигаться вместе с пальцем. Итак, общее решение:

addEventListener('touchmove', function(e) { e.preventDefault(); }, true);

Это предотвратит любое событие touchmove . Однако, поскольку браузер на мобильном устройстве не имеет полосы прокрутки, когда пользователь хочет прокрутить диалоговое окно jquery ui, необходимо разрешить событие touchmove. Этот оператор заблокирует это событие.

addEventListener('touchmove', function(e) { 
if (e.target.id != 'dialog' ) 
e.preventDefault(); 
return false;
}, true);

Затем я добавляю этот оператор, чтобы разрешить прокрутку диалогового окна. Однако у этого решения есть недостаток, поскольку фон можно будет перетаскивать и снова перемещать вместе с пальцем пользователя. Как решить эту проблему? Спасибо.


javascript jquery safari jquery-ui touchmove
person user782104    schedule 08.01.2013    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Весь день занимался этим и нашел это решение. Если вы хотите, чтобы он прокручивал диалоговое окно Safari Mobile на iPad/iPhone/iPod, вам нужно использовать это:

if (/iPhone|iPod|iPad/.test(navigator.userAgent)) {
            $('iframe').wrap(function () {
                var $this = $(this);
                return $('<div />').css({
                    width: $this.attr('width'),
                    height: $this.attr('height'),
                    overflow: 'auto',
                    '-webkit-overflow-scrolling': 'touch'
                });
            });
        }
person GenXisT    schedule 22.01.2013
comment
'-webkit-overflow-scrolling': 'touch' сейчас не поддерживается. - person Valay; 18.11.2014