防止iOS Safari移动网页窗口，以便进行拖动事件。

Question

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

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

这是有问题的网页：http://goo.gl/TsHgh。单击链接，一个 <div> 元素会滑入视图，它就是可拖动的元素。在桌面浏览器上可以工作，但由于Safari会随我的拖动移动窗口，所以在多点触控下无法拖动。

- Django Johnson

Answer 1

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

CSS：

html, body {
  overflow:hidden;
}

JS：

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

- Nick Treadway

---

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

注意--如果在body的x或y上使用overflow hidden，它将防止移动Safari上的最小URL栏效果，在那里您向上拖动时URL栏会消失。此外，touchmove绑定无法解决问题。 - Josh Hibschman

Answer 2

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

嗯，是应用于你的动画的类。

在动画完成后移除该类。

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

另外，要禁用窗口的滚动：

html, body{
    overflow:hidden;
}

- Django Johnson

Answer 3

适用于全局

html {
  overflow-x: hidden;
}

- Alex Golubev

---

你看过2013-2014年的其他答案吗？ - Zsolt Meszaros

Answer 4

尝试添加

。

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

在你的HTML中添加头标签。

- Ruben Nagoga

---

只是禁用缩放。我知道这是一个好的做法，但这怎么能防止窗口移动呢？ - Django Johnson