javascript - 防止 touchmove 事件与 jquery UI 对话框的滚动冲突

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