防止iPad上的滑動滾動HTML5廣告

Question

我正在爲iPad上的雜誌創建廣告，該雜誌需要由水平滾動條控制很長的時間軸。滾動條必須是自定義的，並且我可以在iPad上找到適用於自定義滾動的最佳插件是fleXcroll。

我的問題是，我試圖禁用用戶滑動滾動時間軸的能力。它需要由滾動條專門控制（因爲用戶的滑動應該將它們帶到雜誌的下一頁。）

我一直在尋找這個問題過去兩天，最近的我可以現在解決它是通過控制div的觸摸事件。當我使用event.preventDefault（）作爲touchstart和touchmove它部分工作的div。如果屏幕尚未移動，則滑動不會移動時間線。但是，在使用滾動條之後，如果時間線仍在移動（當滑動東西時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);