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

帮我实现按钮点击后缓慢滚动，以便我可以点击 Ease 标签。谢谢。

- vedankita kumbhar

---

你想做什么？从你写的内容中理解起来相当令人困惑。 - Just code

当我点击右侧按钮滚动选项卡时，它会滚动到末尾，这就是为什么我无法点击位于中间的选项卡的原因。 - vedankita kumbhar

检查调整窗口，你就会明白我的问题。请最小化屏幕并检查。 - vedankita kumbhar

请查看此链接 https://codepen.io/srees/pen/pgVLbm - Just code

没有同样的问题。 - vedankita kumbhar

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

---

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

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);
    }
};

- Carol Skelly

---

嗨@Zim。我已经实现了你的代码，它工作得很好，但是当我连续点击左右按钮时，选项卡列表会离开区域。有时它不能正常工作。你能帮忙解决一下吗？ - vedankita kumbhar

Answer 2

https://embed.plnkr.co/NcdGqX/

看看这个例子。这些选项卡逐渐移动。而且你也可以使用Bootstrap 4。

希望能对你有所帮助。

- uday kyada

---

谢谢 @Uday，但我想在没有任何插件的情况下完成这个。谢谢你。 - vedankita kumbhar