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;});返回项目宽度；};var widthOfHidden = function() {return (($('.wrapper').outerWidth()) - widthOfList() - getLeftPosi()) - scrollBarWidths;};var getLeftPosi = 函数(){返回 $('.list').position().left;};var reAdjust = function() {如果 (($('.wrapper').outerWidth()) 

小提琴 http://jsfiddle.net/vedankita/2uswn4od/13

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

解决方案

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

var widthOfHidden = function(){var ww = 0 - $('.wrapper').outerWidth();var hw = (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;如果 (ww>hw) {返回 ww;}别的 {返回硬件；}};var getLeftPosi = 函数(){var ww = 0 - $('.wrapper').outerWidth();var lp = $('.list').position().left;如果 (ww>lp) {返回 ww;}别的 {返回 lp;}};

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

$('.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('慢');$('.list').animate({left:"-="+getLeftPosi()+"px"},'slow',function(){重新调整()；});});

演示: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());如果 (ww>hw) {返回 (rp>ww?rp:ww);}别的 {返回 (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屋！