javascript - Bootstrap 4 中的滚动标签

Question

我正在处理滚动标签。下面是我的代码。我面临无法单击中间选项卡的问题。在右键单击选项卡上滚动逐渐移动它。我应该怎么做才能逐渐移动选项卡？请帮忙

var hidWidth;
var scrollBarWidths = 40;

var widthOfList = function() {
    var itemsWidth = 0;
    $('.list a').each(function() {
        var itemWidth = $(this).outerWidth();
        itemsWidth += itemWidth;
    });
    return itemsWidth;
};

var widthOfHidden = function() {
    return (($('.wrapper').outerWidth()) - widthOfList() - getLeftPosi()) - scrollBarWidths;
};

var getLeftPosi = function() {
    return $('.list').position().left;
};

var reAdjust = function() {
    if (($('.wrapper').outerWidth()) < widthOfList()) {
        $('.scroller-right').show().css('display', 'flex');
    } else {
        $('.scroller-right').hide();
    }

    if (getLeftPosi() < 0) {
        $('.scroller-left').show().css('display', 'flex');
    } else {
        $('.item').animate({
            left: "-=" + getLeftPosi() + "px"
        }, 'slow');
        $('.scroller-left').hide();
    }
}

reAdjust();

$(window).on('resize', function(e) {
    reAdjust();
});

$('.scroller-right').click(function() {

    $('.scroller-left').fadeIn('slow');
    $('.scroller-right').fadeOut('slow');

    $('.list').animate({
        left: "+=" + widthOfHidden() + "px"
    }, 'slow', function() {

    });
});

$('.scroller-left').click(function() {

    $('.scroller-right').fadeIn('slow');
    $('.scroller-left').fadeOut('slow');

    $('.list').animate({
        left: "-=" + getLeftPosi() + "px"
    }, 'slow', function() {

    });
});

fiddle http://jsfiddle.net/vedankita/2uswn4od/13

帮助我在单击按钮时缓慢滚动，以便我可以单击轻松选项卡。谢谢

Answer 1

您应该逐步移动选项卡“隐藏宽度”，但不要超过包装器宽度...

var widthOfHidden = function(){

    var ww = 0 - $('.wrapper').outerWidth();
    var hw = (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;

    if (ww>hw) {
        return ww;
    }
    else {
        return hw;
    }

};

var getLeftPosi = function(){

    var ww = 0 - $('.wrapper').outerWidth();
    var lp = $('.list').position().left;

    if (ww>lp) {
        return ww;
    }
    else {
        return lp;
    }
};

然后在每次移动后“重新调整”以确定滚动箭头是否仍然需要显示...

$('.scroller-right').click(function() {

  $('.scroller-left').fadeIn('slow');
  $('.scroller-right').fadeOut('slow');

  $('.list').animate({left:"+="+widthOfHidden()+"px"},'slow',function(){
    reAdjust();
  });
});

$('.scroller-left').click(function() {

    $('.scroller-right').fadeIn('slow');
    $('.scroller-left').fadeOut('slow');

    $('.list').animate({left:"-="+getLeftPosi()+"px"},'slow',function(){
        reAdjust();
    });
}); 

演示:https://www.codeply.com/go/Loo3CqsA7T

---

此外，您可以通过确保最后一个选项卡的正确位置永远不会小于 wrapper 宽度以使其与右边缘对齐来改善最后一个选项卡的位置...

var widthOfHidden = function(){

    var ww = 0 - $('.wrapper').outerWidth();
    var hw = (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;
    var rp = $(document).width() - ($('.nav-item.nav-link').last().offset().left + $('.nav-item.nav-link').last().outerWidth());

    if (ww>hw) {
        return (rp>ww?rp:ww);
    }
    else {
        return (rp>hw?rp:hw);
    }
};