防止 iOS Safari 移动网页窗口，以便发生拖动事件答案

【问题标题】：Prevent iOS safari from moving web-page window so drag event can happen防止 iOS Safari 移动网页窗口，以便发生拖动事件
【发布时间】：2013-06-08 17:09:00
【问题描述】：

我在多点触控上使用 Pep.js 进行动态拖动，但我的拖动事件没有被注册，因为当我尝试在 iOS 上的 Safari 中拖动对象时，窗口本身会移动并跟随我的拖动。

如何防止浏览器窗口跟随我的拖动，以便可以拖动我网页中的<div>？

这里是有问题的网页：http://goo.gl/TsHgh。点击链接，一个<div> 滑进来，就是那个可拖动的div。它适用于桌面浏览器，但不能在多点触控上拖动，因为 safari 会随着我的拖动移动窗口。

【问题讨论】：

标签： javascript jquery ios safari multi-touch

【解决方案1】：

尝试添加

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>

到你的html中的head标签

【讨论】：

只是禁用缩放。我知道这样做是一种很好的做法，但是这将如何防止窗口移动？

【解决方案2】：

您的动画是导致问题的原因。

嗯，你的动画被应用到的类。

动画完成后移除类。

setTimeout(function(){
    $('#tabViewWindow').removeClass('animated').removeClass('bounceInRight');
}, 1200);

另外，禁用窗口滚动：

html, body{
    overflow:hidden;
}

【讨论】：

【解决方案3】：

我在使用#ionicframework 时发现了这个解决方案

CSS：

html, body {
  overflow:hidden;
}

JS：

$(window).bind(
  'touchmove',
   function(e) {
    e.preventDefault();
  }
);

【讨论】：

如果我们只应用溢出规则，它将不允许向下滚动页面。我觉得应该是overflow-x