Javascript 防止在iPad HTML5广告上滑动滚动

我在iPad上为一本杂志做广告，它有一个很长的时间线，需要通过水平滚动条来控制。滚动条必须是定制的，我能找到的在iPad上工作的最好的定制滚动插件是fleXcroll

我的问题是，我试图禁用用户滑动滚动时间线的功能。它需要由滚动条专门控制（因为用户的滑动会将它们带到杂志的下一页。）

在过去的两天里，我一直在研究这个问题，目前最接近解决这个问题的方法是控制div的触摸事件。当我在div上对touchstart和touchmove使用event.preventDefault（）时，它可以部分工作。如果屏幕未移动，则滑动不会移动时间线。但是，使用滚动条后，如果时间线仍在移动（iPad在滑动物品时会有一种放松，因此移动的东西在停止之前都会变慢），您可以抓取时间线并通过滑动来移动它。另外，如果你用手指慢慢地让滚动条停止移动直到它停止，你可以再次滑动时间线

因此，问题在于，在iPad的杂志广告中，用户无法将某个div刷到一边。滚动只能由滚动条控制

---

非常感谢您的帮助！谢谢

您可以注册JS来观察刷卡事件，然后“忽略”它们，防止它们在链的上游传播。类似这样的事情可能会有所帮助：

(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);