iPadのHTML5広告でのスワイプスクロールの防止

Question

タイムラインの長いiPad用の雑誌の広告を、水平スクロールバーで制御する必要があります。スクロールバーはカスタムでなければならず、iPadsで動作するカスタムスクロール用の最良のプラグインはfleXcrollでした。

私の問題は、ユーザーがタイムラインをスワイプする機能を無効にしようとしていることです。

私はこの問題を過去2日間見てきました。私はこの問題を最もよく捉えています。現時点でそれを解決するには、divのタッチイベントを制御することです。 touchstartにevent.preventDefault（）を使用し、divにtouchmoveを使用すると、部分的に機能します。画面が移動されていない場合、スワイプはタイムラインを移動しません。ただし、スクロールバーを使用した後、タイムラインがまだ動いている場合（iPadsにはスワイプ時にイージングがあり、移動中のものが停止する前に減速します）、タイムラインをつかんでスワイプして移動できます。また、スクロールバーが停止するまでゆっくりスクロールバーを指で動かして停止させると、タイムラインを再びスワイプできます。

この問題は、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);