1

水平スクロールバーで制御する必要がある長いタイムラインを持つ雑誌の広告を iPad で作成しています。スクロールバーはカスタムである必要があり、iPad で動作することがわかったカスタム スクロール用の最適なプラグインは fleXcroll でした。

私の問題は、ユーザーがタイムラインをスワイプしてスクロールする機能を無効にしようとしていることです。スクロールバーによって排他的に制御される必要があります (ユーザーからのスワイプで雑誌の次のページに移動する必要があるため)。

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

そのため、問題は、ユーザーが iPad の雑誌広告で特定の div を横にスワイプできないことです。スクロールは、スクロールバーによってのみ制御する必要があります。

どんな助けでも大歓迎です！ありがとう！

4

1 に答える 1

3

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);
于 2012-04-25T15:21:20.183 に答える