Question

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

我希望用户能够点击其中一个元素并让该元素滚动到屏幕的中心。

我自己尝试用jQuery编写这个，但我似乎无法让逻辑完全正确。我有点动，但选中的元素不会移动到屏幕的中心。

这是我做过的事情的小提琴：http://jsfiddle.net/geQ64/1/

这里还有来自小提琴的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是任何人都需要的。

- 55中的var position是针对我正在使用此脚本移动的元素下方的页面中心的箭头。

$(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);

        }

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

1 个答案: