中心根据活动链接水平滚动

Question

如何使用jQuery根据活动链接水平居中滚动？

我正在使用overflow-x: scroll;来启用水平滚动，但我希望滚动按照活动链接居中。

这就是我想要实现的目标：

Example

$(document).ready(function () {
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");

        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');
    });
});

function onScroll(event){
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        currLink.removeClass("active");
    });
}

Answer 1

AFAIK当您登陆页面时，您需要使用JavaScript自动滚动。你可以做点什么......

$(document).ready(function () {
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");

        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');
        var myScrollPos = $('a.active').offset().left + $('a.active').outerWidth(true)/2 + $('.menu').scrollLeft() - $('.menu').width()/2;
        $('.menu').scrollLeft(myScrollPos);
    });
});

您可以调整myScrollPos以使其停在您想要的位置，这会使其滚动到您的活动按钮的左侧。细分如下！

$('a.active').offset().left + $('a.active').outerWidth(true)/2

这使我们得到按钮与其所包含的元素的可见边缘的距离，在这种情况下是菜单，然后减去按钮宽度的一半以获得返回值是按钮的中心而不是边缘。它没有包含在父母身上完成的任何滚动，所以从这里我们添加

+ $('.menu').scrollLeft()

在混音中，我们从左侧获得菜单项的距离，加上当前滚动位置。两者的结合使我们在每个按钮之间获得一致的滚动坐标。然后，把它包起来，

- $('.menu').width()/2

将滚动偏移到菜单宽度的负1/2，有效地使按钮居中！

*更新了最终解决方案！

Answer 2

$(document).ready(function () {
    var element = document.querySelector(".menu a.active");
    element.scrollIntoView({behavior: "smooth" ,inline: "center"});
});

可能会做同样的事情。