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

Horizontally scrolling treeview on mouseover

本文关键字：视图 滚动 水平 悬停 鼠标      更新时间：2023-09-26

我有一个空间有限的树视图，因此有时树视图项可能会超出容器。为了解决这个问题，我隐藏了容器溢出，并设置了一些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);
    });
});

您可以尝试将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/

相关文章：