0

我有一个空间有限的树视图，因此有时树视图项目最终可能会超出容器。为了解决这个问题，我隐藏了容器溢出并设置了一些 javascript，当用户将鼠标悬停在树形视图的各个部分时会自动水平滚动。

这几乎可以工作，但是如果您从一个缓慢移动li到另一个，则会出现一些稍微奇怪的行为。如果你在树上快速移动鼠标，它的行为会如预期的那样，但如果你缓慢地来回移动，有时树视图会从左到右水平反弹。

要对此进行测试，请尝试从文件夹 2 移动到文件夹 3 并再次返回。这里发生了什么？

我的 JS 代码在下面，你可以在我制作的这个小提琴中看到这一切

$(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);
    });
});
4

1 回答 1

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/

于 2013-08-28T11:48:27.173 回答