下拉菜單與滾動不工作在iPad上

在我的導航欄中，我有一個可滾動的下拉列表。一旦用戶將鼠標懸停在它上面，它就會出現，並且他可以上下滾動以選擇鏈接。它適用於所有桌面瀏覽器，但在iPad上顯示下拉菜單後，它會卡住，用戶無法上下滾動。下拉菜單與滾動不工作在iPad上

這裏是我使用的JS：

VAR maxHeight = 400; $（功能（）{

$(".dropdown > li").hover(function() { 

    var $container = $(this), 
     $list = $container.find("ul"), 
     $anchor = $container.find("a"), 
     height = $list.height() * 1.1,  // make sure there is enough room at the bottom 
     multiplier = height/maxHeight;  // needs to move faster if list is taller 

    // need to save height here so it can revert on mouseout    
    $container.data("origHeight", $container.height()); 

    // so it can retain it's rollover color all the while the dropdown is open 
    $anchor.addClass("hover"); 

    // make sure dropdown appears directly below parent list item  
    $list 
     .show() 
     .css({ 
      paddingTop: $container.data("origHeight") 
     }); 

    // don't do any animation if list shorter than max 
    if (multiplier > 1) { 
     $container 
      .css({ 
       height: maxHeight, 
       overflow: "hidden" 
      }) 
      .mousemove(function(e) { 
       var offset = $container.offset(); 
       var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier); 
       if (relativeY > $container.data("origHeight")) { 
        $list.css("top", -relativeY + $container.data("origHeight")); 
       }; 
      }); 
    } 

}, function() { 

    var $el = $(this); 

    // put things back to normal 
    $el 
     .height($(this).data("origHeight")) 
     .find("ul") 
     .css({ top: 0 }) 
     .hide() 
     .end() 
     .find("a") 
     .removeClass("hover"); 

});

}）;

我不知道我做了解釋它正確（英文心不是我的第一語言），但你可以明白我的意思的https://jsfiddle.net/x7L4zgfk/1/

來源

2015-06-11 Medvjed Jedan

的可能重複[JavaScript的 - 不觸發的iPad/iPhone mousemove事件]（http://stackoverflow.com/questions/14071285/javascript-mousemove-event-not- ipad-iphone） – twill

重複從JavaScript - mousemove event not triggered on iPad/iPhone

只需使用jquery.event.move。移動事件提供了一種在鼠標和觸控設備上設置按下移動版本交互的簡單方法。所以你不必擔心你的用戶有哪些設備。

來源和實例：http://stephband.info/jquery.event.move/

來源

2015-06-11 17:39:29 twill

對不起，但作爲完整的JS新手，你能給我更多的信息嗎？將非常gratefull！ –

您需要從上面的鏈接中獲取圖書館並添加到您的網站（https://github.com/stephband/jquery.event.move/blob/master/js/jquery.event.move.js） - 然後替換 '.mousemove（function（e）{// etc etc}）' With '.bind（'move'，function（e）{// etc etc}）' – twill

謝謝，請試試看馬上！ –

下拉菜單與滾動不工作在iPad上

回答

相關問題