Prevent iOS safari from moving web-page window so drag event can happen

Question

I am using Pep.js for kinetic drag on multi-touch, but my drag events are not being registered because when I try to drag an object in the safari, on iOS, window the window itself moves and follows my drag.

How can I prevent the browser window from following my drag so that the <div> in my webpage can be dragged?

Here is the webpage in question: http://goo.gl/TsHgh. Click on the link and a <div> slides in, it is that div that is draggable. It works on desktop browsers, but can not be dragged on multi-touch because safari moves the window along with my drag.

score 38 · Answer 1 · answered May 31 '14 at 00:07

38

I have found this solution while working with the #ionicframework

CSS:

html, body {
  overflow:hidden;
}

JS:

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

answered May 31 '14 at 00:07

Nick Treadway

399
3
4

3

if we apply just overflow rule it will not allow scrolling the page down. I think it should be overflow-x – Harsha Nov 26 '16 at 16:58
Caution -- if you do overflow hidden on either x or y on the body, it will prevent the minimal url bar effect on mobile safari, where you drag up and the URL bar disappears. Also, the touchmove bind doesn't solve the problem. – Josh Hibschman Jan 27 '22 at 20:48

score 0 · Answer 2 · answered Jun 12 '13 at 18:16

Your animation is what is causing the issue.

Well, the class your animation is being applied to.

Remove the class after the animation is done.

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

Also, to disable scrolling on the window:

html, body{
    overflow:hidden;
}

score 0 · Answer 3 · answered Mar 01 '23 at 14:50

0

apply globaly to

html {
  overflow-x: hidden;
}

answered Mar 01 '23 at 14:50

Alex Golubev

1

Have you seen the other answers from 2013-2014? – Zsolt Meszaros Mar 01 '23 at 15:41

score -1 · Answer 4 · answered Jun 12 '13 at 14:43

-1

Try to add

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

To head tag in your html

answered Jun 12 '13 at 14:43

Ruben Nagoga

2,178
1
19
30

6

that just disables zooming. I understand it is good practice to have that, but how will that prevent the window from moving? – Django Johnson Jun 12 '13 at 15:14

Prevent iOS safari from moving web-page window so drag event can happen

4 Answers4

Linked