Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 860
Django Johnson Avatar asked Jun 12 '13 14:06

Django Johnson


People also ask

How do I stop Safari from scrolling iOS?

The most straightforward way for disabling scrolling on websites is to add overflow: hidden on the <body> tag. Depending on the situation, this might do the job well enough. If you don't have to support older versions of iOS, you can stop reading here.

How do I fix my scroll on safari?

Click the Apple menu at the top-left of the screen. Select System Preferences. Click the General preference tab - it's the first one, at the top. Under the Show scroll bars section, select the Always option.


1 Answers

I have found this solution while working with the #ionicframework

CSS:

html, body {
  overflow:hidden;
}

JS:

$(window).bind(
  'touchmove',
   function(e) {
    e.preventDefault();
  }
);
like image 180
Nick Treadway Avatar answered Sep 19 '22 14:09

Nick Treadway