2

I want to make a web page on mobile devices (both Android and iOS) with fingers swipe effect, but when I add event.preventDefault() into ontouchstart / ontouchmove / ontouchend callback functions the scroll bar of the web page is being disabled, it is a disaster :(

I made an ugly hack for this with scrollTop so that the page can be scrolled:

element.ontouchmove = function(event) {
    event.preventDefault();
    var oldScrollTop = document.body.scrollTop;
    var dist = final_y - start_y // here start_y is pageY from touchstart and final_y is current pageY
    document.body.scrollTop = oldScrollTop - dist > 0 ? oldScrollTop - dist : 0;
    //...
}

It works now but I still want to know:

  1. It is there any other better solutions about this?
  2. Why we must use "preventDefault()" in the callback functions? what we have prevented by this?

Thanks.

Shadow The GPT Wizard
  • 66,030
  • 26
  • 140
  • 208
cailu
  • 21
  • 2
  • Looks like duplicate: http://stackoverflow.com/questions/7798201/document-ontouchmove-and-scrolling-on-ios-5 not familiar enough with mobile apps though so not casting close vote. – Shadow The GPT Wizard Feb 12 '12 at 12:02
  • Your ugly hack was the panacea for an issue I was having w/ multiple vertical scrollbars and only wanting to scroll the innermost item. Thanks man – Alkanshel Nov 19 '12 at 04:46

0 Answers0