防止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浏览器的对话框中，你需要使用这样的：

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