Question

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

这个几乎有效但如果你从一个li缓慢移动到另一个$(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); }); });，会有一些奇怪的行为。如果您将鼠标快速向下移动到树上，它的行为与预期的一样，但如果您慢慢前后移动，有时树视图会从左到右水平反弹。

要测试此功能，请尝试从文件夹2移至文件夹3并再次返回。这里发生了什么？

我的JS代码如下，你可以see all this happening in this fiddle I made

{{1}}

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/

鼠标悬停时水平滚动树视图

1 个答案: