防止在 iPad HTML5 广告上滑动滚动答案

【问题标题】：Preventing swipe scrolling on an iPad HTML5 ad防止在 iPad HTML5 广告上滑动滚动
【发布时间】：2012-04-25 15:10:54
【问题描述】：

我正在为 iPad 上的杂志制作广告，该杂志的时间线很长，需要通过水平滚动条进行控制。滚动条必须是自定义的，而我能在 iPad 上找到的用于自定义滚动的最佳插件是 fleXcroll。

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

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

因此，问题在于阻止用户在 iPad 的杂志广告中将某个 div 滑动到一侧。滚动只能由滚动条控制。

非常感谢任何帮助！谢谢！

【问题讨论】：

标签： javascript jquery ipad html scroll

【解决方案1】：

您可以注册 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);

【讨论】：