Bootstrap 4中的滚动选项卡 [英] Scrolling Tabs in Bootstrap 4

问题描述

我正在使用滚动标签.下面是我的代码.我遇到无法单击中间选项卡的问题.在右键单击选项卡上，滚动将其逐渐移动.如何逐步移动标签页?请帮助

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

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

解决方案

您应逐步移动标签页的隐藏宽度"，但不超过包装纸宽度...

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

I am working on scrolling tab. Below is my code. I am facing problem that I am not able to click middle tabs. On right button click tabs scrolls move it gradually. What should I do to move tabs gradually? Please help

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

Help me to scroll slowly on button click so that I can click on ease tab. Thanks

解决方案

You should incrementally move the tabs "width of hidden", but no more than wrapper width...

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

And then "readjust" after each movement to determine whether or not the scroll arrows still need to show...

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

Demo: https://www.codeply.com/go/Loo3CqsA7T

---

Also, you can improve the position of the last tab by making sure it's right position is never less than wrapper width to keep it aligned to the right edge...

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

这篇关于Bootstrap 4中的滚动选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！