javascript - 需要时水平滚动列表居中

Question

单击列表中的链接时，我必须移动水平导航栏。我创建了一个 JSFiddle 来说明我的问题。

当用户点击列表中的链接时，列表需要向左或向右滚动。这部分已经完成。

当您点击链接时，事件链接需要在列表中居中。

JSFiddle 链接: https://jsfiddle.net/7yq0jq9s/2/

html

<div class="container">
<ul>
    <li class="active"> <a href="#">1</a>

    </li>
    <li> <a href="#">2</a>

    </li>
    <li> <a href="#">3</a>

    </li>
    <li> <a href="#">4</a>

    </li>
    <li> <a href="#">5</a>

    </li>
    <li> <a href="#">6</a>

    </li>
    <li> <a href="#">7</a>

    </li>
    <li> <a href="#">8</a>

    </li>
</ul>

CSS

div.container {
    width: 600px;
    overflow: hidden;
}

ul {
    white-space: nowrap;
}

ul li {
    display: inline-block;
    background: green;
}

ul li a {
    padding: 80px;
    display: block;
    color: white;
    font-weight: bold;
    text-decoration: none;
}

ul li.active {
    background: blue;

}

JS

$(document).ready(function () {
var scrollTo = 0;
$('body').on('click', "a", function () {
    var activeItem = $('li.active');
    var selectedItem = $(this).parent()

    var activeIndex = $('li').index(activeItem);
    var selectedIndex = $('li').index(selectedItem);

    if (selectedIndex > activeIndex) {
        scrollTo -= selectedItem.position().left - activeItem.position().left;
        console.log('Scroll right');
    } else {
        scrollTo += Math.abs(selectedItem.position().left - activeItem.position().left);
        console.log('Scroll left');
        if (scrollTo >= 0) {
            scrollTo = 0;
        }
    }

    $('ul').css('transform', 'translateX(' + scrollTo + 'px)');
    activeItem.removeClass('active');
    selectedItem.addClass('active');

});
});

Answer 1

我认为只获取被点击元素的绝对位置并计算容器的中间位置比检查它是否需要向左或向右滚动更容易:

    var scrollTo = 0;
    $('body').on('click', "a", function () {
        var activeItem = $('li.active');
        var selectedItem = $(this).parent()

        var activeIndex = $('li').index(activeItem);
        var selectedIndex = $('li').index(selectedItem);
        
        scrollTo =- selectedItem.position().left + $('.container').width() / 2 - selectedItem.width() / 2;

        $('ul').css('transform', 'translateX(' + scrollTo + 'px)');
        activeItem.removeClass('active');
        selectedItem.addClass('active');

    });

div.container {

    width: 600px;

    overflow: hidden;

}

ul {

    white-space: nowrap;
    transition: all ease 750ms;
    position:relative;
}

ul li {

    display: inline-block;

    background: green;

}

ul li a {

    padding: 80px;

    display: block;

    color: white;

    font-weight: bold;

    text-decoration: none;

}

ul li.active {

    background: blue;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
    <ul>
        <li class="active"> <a href="#">1</a>

        </li>
        <li> <a href="#">2</a>

        </li>
        <li> <a href="#">3</a>

        </li>
        <li> <a href="#">4</a>

        </li>
        <li> <a href="#">5</a>

        </li>
        <li> <a href="#">6</a>

        </li>
        <li> <a href="#">7</a>

        </li>
        <li> <a href="#">8</a>

        </li>
    </ul>
</div>