Preventing swipe scrolling on an iPad HTML5 ad

Question

I'm creating an ad for a magazine on iPad that has a long timeline that needs to be controlled by a horizontal scrollbar. The scrollbar had to be custom, and the best plugin for custom scrolling that I could find that worked on iPads was fleXcroll.

My problem is that I'm trying to disable the ability for the user to swipe scroll the timeline. It needs to be exclusively controlled by the scrollbar (since a swipe from the user should bring them to the next page of the magazine.)

I've been looking at this problem for the past two days and the closest I can get to solving it at the moment is by controlling the touch events for the div. When I use event.preventDefault() for touchstart and touchmove on the div it works partially. If the screen has not been moved, a swipe will not move the timeline. However, after using the scrollbar, if the timeline is still moving (iPads have a sort of easing when things are swiped so that whatever is being moved slows down before stopping) you can grab the timeline and move it by swiping it. Also, if you slowly let the scrollbar stop moving with your finger on it until it stops, you can then swipe the timeline again.

So, the problem is preventing the ability for users to swipe a certain div to the side in a magazine ad for iPad. The scrolling should ONLY be controlled by the scrollbar.

Any help is greatly appreciated! Thanks!

Answer 1

You can register JS to observe the swipe event and then just "ignore" them and prevent them from propagating further up the chain. Something like this might help:

(function($) {
    $.fn.touchwipe = function(settings) {
       var config = {
           min_move_x: 20,
           wipeLeft: function() { alert("left"); },
           wipeRight: function() { alert("right"); },
           preventDefaultEvents: true
    };

    if (settings) {
       $.extend(config, settings);
    }

    this.each(function() {
       var startX;
       var isMoving = false;

       function cancelTouch() {
         this.removeEventListener('touchmove', onTouchMove);
         startX = null;
         isMoving = false;
       }

       function onTouchMove(e) {
         if(config.preventDefaultEvents) {
          e.preventDefault();
         }
         if(isMoving) {
            var x = e.touches[0].pageX;
            var dx = startX - x;
            if(Math.abs(dx) >= config.min_move_x) {
              cancelTouch();
            if(dx > 0) {
               config.wipeLeft();
            }
            else {
               config.wipeRight();
            }
       }
     }
   }

   function onTouchStart(e)
   {
     if (e.touches.length == 1) {
       startX = e.touches[0].pageX;
       isMoving = true;
       this.addEventListener('touchmove', onTouchMove, false);
     }
   }
 this.addEventListener('touchstart', onTouchStart, false);
 });

 return this;
  };

})(jQuery);