Controlling events on Apple Ipad's Safari

Question

Well, this will be a tough one. I think i have exhausted all my options, let's see if you can come up with something better.

I have a horizontal carousel and am using touchstart, touchmove, touchend to control it. For the sake of this example, the html structure is something like:

<div>
   <ul id="strip">
     <li><a>...</a></li>
     <li><a>...</a></li>
     ...................
   </ul>
</div>

I have separated my eventhandlers to behave a bit differently from mouse to touch events, so, thinking only of touch, I have:

var strip = document.getElementById('strip');
strip.addEventListener('touchstart', touchStartHandler);
document.addEventListener('touchmove', touchMoveHandler);
document.addEventListener('touchend', touchEndHandler);

I want the horizontal scrolling to work even if the user has his finger outside my strip, so I attached the touchmove and touchend event to the document.

At first, I thought it would be natural to, while the user was scrolling my carousel, for the browser to stay put, so my touchMoveHandler looked something like:

function touchMoveHandler(evt){
   evt.preventDefault();
   ...................
}

... this way, the browser wouldn't pan vertically when the user's finger positioned varied in the Y axis. Our usability guy, thinks otherwise, and I actually agree with him now. He wants the browser to respond normally, unless the movement of the finger is totally or near perfectly horizontal.

Anyway, this is probably too much information, so I am going to detail my actual problem now. This is a snippet of the prototype I'm working on as a proof of concept:

var stopY, lastTime, newTime;

var touchStartHandler(evt){
   ...
   stopY = true;
   lastTime = new Date();
   ...
};
var touchMoveHandler(evt){
   ...
   //this following code works like a setInterval, it turns stopY on and off every 1/2 sec
   //for some reason, setInterval doesn't play well inside a touchmove event
   newTime = new Date();
   if(newTime - lastTime >= 500){
      stopY = !stopY;
      lastTime = newTime;
   }
   ...
   if(stopY){
      evt.preventDefault();
   }
   ...
}

I am absolutely sure this code is pristine, I debugged it with console logs and everything is doing what it's supposed to do except for the computing of the browser panning through the stopY variable.

If I run the code starting with stopY = true, there is no browser panning, if I start with stopY = false, the browser pans as expected. The problem is that I would expect this behaviour to change every half a second and it doesn't.

I hope I didn't complicate this too much for you, but this is really specific.

Update:

You can try the following links (on an Ipad, or Iphone):
http://andrepadez.com/ipadtouch
http://andrepadez.com/ipadtouch?stopy=false

use view source, to see the whole code

Answer 1

Can you try stopY = !stopY;?

UPDATE

Once you execute preventDefault(), scrolling will can not return until touchend fires or you enable it. The following may give you the behavior you are looking for:

if(stopY){ return false; }
else { return true; }

or for simplicity just return !stopY;...