代码之家 › 专栏 › 技术社区 › vedankita kumbhar

在Bootstrap 4中滚动选项卡

bootstrap-4 css html jquery javascript

2

vedankita kumbhar · 技术社区 · 7 年前

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

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() {

    });
});

不停摆弄 http://jsfiddle.net/vedankita/2uswn4od/13

2 回复 | 直到 7 年前

1

Carol Skelly 7 年前

您应该递增地移动选项卡“隐藏宽度”,但不超过包装宽度。。。

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

2

-1

uday 7 年前

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

看看这个例子。这个标签会逐渐移动。也可以使用引导4。

我希望这可能会有帮助。