21

The usual:

document.body.addEventListener('touchmove',function(event){event.preventDefault();},false);

isn't working for me. I am trying to make my iPad webapp feel as native as possible. Any answer is appreciated.

Valli
  • 267
  • 1
  • 2
  • 9
  • possible duplicate of [Disable scrolling in an iPhone web application?](http://stackoverflow.com/questions/2890361/disable-scrolling-in-an-iphone-web-application) – Gajus Nov 11 '14 at 00:03

1 Answers1

53

Put that handler on the document element directly, not on the body.

I've had success with the following:

<meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">

Then with jQuery:

$(document).bind('touchmove', false);

This will also be useful if you want to handle different orientations:

<link rel="stylesheet" type="text/css" href="css/main.css" media="all">
<link rel="stylesheet" type="text/css" href="css/landscape.css" media="all and (orientation:landscape)">
<link rel="stylesheet" type="text/css" href="css/portrait.css" media="all and (orientation:portrait)">
Alnitak
  • 334,560
  • 70
  • 407
  • 495