Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Preventing a Webpage From Dragging on an iPad in the Code

I'm currently working on a webpage that will be viewed on an iPad. It uses the jquery-ui libraries to display a slider bar. However, when a user tries to drag the sliderbars, instead, the entire page drags. Does anyone know if there is any sort of override that can be specified in the jquery or html to prevent the browser from dragging the page on an iPad upon touch drag event?

like image 529
Moki Avatar asked Nov 11 '10 04:11

Moki


People also ask

How do I stop my iPad screen from scrolling?

Go to Settings and tap Accessibility. Turn on the feature, then use the slider to select a sensitivity level.

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.


1 Answers

You might want to check out this article as well: Adapting an Interface for Touch Devices. It discusses how to detect if you're running in a touch environment, but it also (further down in the article) has a discussion about overriding the default behavior of the touchstart event... "By capturing the finger movement and hijacking it, we can prevent the default scrolling behavior using jQuery’s event.preventDefault() method, and insert anything we want."

like image 58
heavi5ide Avatar answered Nov 03 '22 00:11

heavi5ide