Question

我正在为iPad上的杂志创建一个广告，该广告的时间线很长，需要通过水平滚动条控制。滚动条必须是自定义的，我可以在iPad上找到的自定义滚动的最佳插件是fleXcroll。

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

过去两天我一直在关注这个问题，而目前最接近解决问题的方法是控制div的触摸事件。当我在div上使用event.preventDefault（）进行touchstart和touchmove时，它可以部分工作。如果屏幕尚未移动，则滑动不会移动时间轴。但是，在使用滚动条之后，如果时间轴仍然在移动（iPad在滑动时会有一些缓和，以便在停止之前移动的任何内容都会减慢），您可以抓住时间轴并通过滑动来移动它。此外，如果您慢慢让滚动条停止移动，直到它停止，您可以再次滑动时间轴。

因此，问题在于阻止用户在iPad杂志广告中向某一侧滑动某个div。滚动应仅由滚动条控制。

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

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

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

1 个答案: