Question

由于在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);

然后我添加此语句以允许对话框滚动。然而，这种解决方案存在缺陷，因为背景将是可拖动的并且再次与用户手指一起移动。如何解决这个问题？感谢。

Answer 1

整天处理这个并找到了这个解决方案。如果你想在ipad / iphone / ipod上的safari mobile上滚动对话框，你需要使用它：

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'
                });
            });
        }

使用jquery UI对话框滚动防止touchmove事件冲突

1 个答案: