需要时水平滚动列表中心

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>