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?
Go to Settings and tap Accessibility. Turn on the feature, then use the slider to select a sensitivity level.
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.
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."
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With