javascript - Horizontally scrolling treeview on mouseover -

i have treeview space limited, such treeview items can end going outside container. around have made container overflow hidden , set javascript auto scrolls horizontally user mouses on various parts of treeview.

this almost works there odd behaviour if move 1 li another. if move mouse fast down tree behaves expected if go , , forth treeview bounces horizontally left right.

to test out try move folder 2 folder 3 , again. happening here?

my js code below , can see happening in fiddle 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);     }); }); 

you can try changing 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/