javascript - 自动滚动到可滚动 div 中的元素

Question

我有 5 个元素位于比屏幕大的 div 中(在手机上)。

我希望用户能够单击其中一个元素并将该元素滚动到屏幕中央。

我自己尝试用 jQuery 写这个，但我似乎无法完全正确地理解逻辑。我有点动了，但所选元素没有到达屏幕中央。

这是我目前所做工作的 fiddle :http://jsfiddle.net/geQ64/1/

这也是来自 fiddle 的 JS:

$(window).on('load', function() {

    $('.tab-3').trigger('click');

    var width = $(window).width();
    if (width < 651) {

        $('.ul-wrap').scrollLeft( $('.tab-3').offset().left );
    }    

});



$('.single-tabs').on('click', function() {

    var offset = $('.tabs').width();
    offset = offset/5;
    var center = offset/2;

    var tab = $(this).data('tab');
    $('.tabs-content').hide();
    $('.tab'+ tab +'').show();

    var width = $(window).width();
    if (width > 650) {

        var arrow = tab*20-12;
        $('.arrow-up').css('margin-left', '' + arrow + '%');

    } else {
        tab = tab - 1;
        var position = offset * tab - center;
        $('.ul-wrap').scrollLeft(position);

    }



});

Answer 1

已找到修复程序，这是任何人都需要的 JS。

var position 中的 - 55 是一个箭头，它位于我使用此脚本移动的元素下方的页面中心。

$(window).on('load', function() {

        $('.tab-3').trigger('click');

        var width = $(window).width();
        if (width < 651) {

            var offset = $('.tabs').width();
            offset = offset/7;
            var center = offset/2;
            var position = offset * 2 + center - 50;

            $('.ul-wrap').animate({
                scrollLeft: position
            }, 200);
        }

    });



    $('.single-tabs').on('click', function() {

        var offset = $('.tabs').width();
        offset = offset/7;
        var center = offset/2;

        var tab = $(this).data('tab');
        $('.tabs-content').hide();
        $('.tab'+ tab +'').show();

        var width = $(window).width();
        if (width > 650) {

            var arrow = tab*20-12;
            $('.arrow-up').css('margin-left', '' + arrow + '%');

        } else {
            tab = tab - 1;
            var position = offset * tab + center - 50;
            $('.ul-wrap').animate({
                scrollLeft: position
            }, 200);

        }