在鼠標懸停上水平滾動treeview

Question

我有一個空間有限的樹形視圖，因爲有時樹形視圖項最終會走出容器。爲了解決這個問題，我已經隱藏了容器溢出並設置了一些javascript，當用戶將鼠標放在樹視圖的各個部分上時，它們會自動水平滾動。

這差不多的作品，但如果你從一個li緩慢地移動到另一個有一些有點奇怪的行爲。如果您將鼠標快速移動到樹上，它的行爲與預期相同，但如果您慢慢來回，樹視圖有時會從左到右水平反彈。

要測試這一點，請嘗試從文件夾2移動到文件夾3並返回。這裏發生了什麼？

我的JS代碼低於你可以see all this happening in this fiddle I made

$(function() { 
    $("#addresspanel ul.treeview").on("mouseover", "li", function (e) { 
     e.stopPropagation(); 

     console.log("mouseover", this, $(this).first().offset().left); 
     $('#addresspanel ul:first').stop().animate({ 
      scrollLeft: $(this).first().offset().left 
     }, 400); 
     //$('#addresspanel ul:first').stop().animate({ "margin-left": -($(this).first().offset().left) }, 400); 
    }); 
}); 

Answer 1

你可以嘗試改變mouseover到mousemove。

$(function() { 
    $("#addresspanel ul.treeview").on("mousemove", "li", function (e) { 
     e.stopPropagation(); 

     $('#addresspanel ul:first').stop().animate({ 
      scrollLeft: $(this).first().offset().left 
     }, 400); 

    }); 
}); 

的jsfiddle：http://jsfiddle.net/6bkDF/1/