How to prevent the default behavior of touchmove events in iOS 5?

Question

I have a web application that includes a component that the user can scroll up and down with the finger. I use the preventDefault method to prevent the default behavior when touch movement moves the entire screen on iOS devices.

Unfortunately, this does not seem to work in iOS 5, which I just updated until this morning. I must assume that this was just done differently in iOS 5, but I have not yet been able to find a resource that provides instructions.

Thank!

Update No. 1: I could not find the answer to my specific question, but I managed to slightly modify the code to use the -webkit-overflow-scrolling style (set to "touch") and implement insightful inertial scrolling (where the content scrolls faster in depending on the speed of your napkin, and the “rubber band rebound” returns if it falls within the boundaries. Pretty cool looking ...

Update # 2: I have another weird issue. For some strange reason, the overflow scroll behavior sometimes mixes, so you need to drag your finger left and right over the containing element so that its contents move up and down. I have yet to find out why this is happening - does anyone have any ideas?

Answer 1

I found a very simple solution. When an event hits your element that is allowed to scroll, just add a flag to the event. In the event listener on the document, just check if the flag is set and only stop the event if the flag is not set:

this.$scrollableEl.on('touchmove', function(event){
  event.comesFromScrollable = true;
  //when you have containers that are srollable but 
  //doesn't have enough content to scroll sometimes:
  //event.comesFromScrollable = el.offsetHeight < el.scrollHeight;
})

$document.on('touchmove', function(event){
    if(!event.comesFromScrollable){
      event.preventDefault()
    }
  })

You can also use event.stopImmediatePropagation , so you do not need the eventListener element in the document element, but this interrupts zepto.js tapin my case:

this.$scrollableEl.on('touchmove', function(event){
  event.stopImmediatePropagation()
})

Answer 2

Firstly, I can verify that e.preventDefault () disables scrolling in iOS 5 with the following code:

document.ontouchmove = function(e){ e.preventDefault(); }

, : div. ( - , , .)

# 2, , , ( ). , . , : . , , 100% - : , .