左右滚动导航栏不一次全部宽度问题

Question

问题是我无法找到正确的宽度来左右滚动。因此，我的导航选项卡无法正确地一一滚动。每次我按下向右滚动按钮时，它都会增加超出所需宽度的宽度。因此，导航栏不能正确地一一滚动。

谢谢。

var scrollBarWidths = 40;
var widthOfList = function(){
  var itemsWidth = 0;
  $('.list a').each(function(){
    var itemWidth = $(this).outerWidth();
    itemsWidth+=itemWidth;
  });
  return itemsWidth;
};
var innerwidth = 0;
var widthofEachNav = function(){
var itemsWidth = 0;
var count = 0;
  $('.list a').each(function(){
    innerwidth = $(this).innerWidth();
    var itemWidth = $(this).outerWidth();
    itemsWidth+=itemWidth;
	count++
  });
  console.log(itemsWidth+"  "+count+"     width"+(itemsWidth/count ))
  return (itemsWidth/count);
}
var widthNav = widthofEachNav();
var getLeftPosi = function(){
  return $('.list').position().left;
};
var widthOfHidden = function(){
  return (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi());
};
var hidvith = widthOfHidden();

$('.scroller-right').click(function() {
  $('.scroller-left').fadeIn('slow');
if(widthOfHidden()<0 && getLeftPosi()<=0){
	$('.list').animate({left:"-="+widthNav+"px"},'slow',function(){  });
}
  
});

$('.scroller-left').click(function() {
	$('.scroller-right').fadeIn('slow');
  if(getLeftPosi()<0 ){
	$('.list').animate({left:"+="+widthNav+"px"},'slow',function(){  	});
  }
  	
});   
$(window).on('resize',function(e){  
  	reAdjust();
});
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();

	  
  }

  $('.scroller-right').show();
}

reAdjust();

.closeBtn:focus {
  outline: none;
}
.w-100.p-3 {
    max-width: 50%;
}

    .close{
        color: gray;
      }

.wrapper {
    position:relative;
    margin:0 auto;
    overflow:hidden;
	padding:5px;
  	height:50px;
}

.list {
    position:absolute;
    left:0px;
    top:0px;
  	min-width:3500px;
  	
    margin-top:0px;
}

.list li{
	display:table-cell;
    position:relative;
    text-align:center;
    cursor:grab;
    cursor:-webkit-grab;
    color:#efefef;
    vertical-align:middle;
}

.scroller {
  text-align:center;
  cursor:pointer;
  display:none;
  padding:7px;
  padding-top:11px;
  white-space:no-wrap;
  vertical-align:middle;
  background-color:#fff;
}

.scroller-right{
  float:right;
}

.scroller-left {
  float:left;
}
.xyzzz {
    max-width: 27% !important;
    min-width: 20% !important;
}

<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- <script src="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></script> -->
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div class="w-100 p-3">

  <div class="scroller scroller-left mt-2"><i class="fa fa-chevron-left"><</i></div>
  <div class="scroller scroller-right mt-2"><i class="fa fa-chevron-right"></i>></div>
  <div class="wrapper">
   <nav class="nav nav-tabs list mt-2" id="myTab" role="tablist">
  <a class="nav-item nav-link active" data-toggle="tab" href="#tab1" role="tab" aria-controls="public" aria-expanded="true">Tab1</a>
  <a class="nav-item nav-link" href="#tab2" role="tab" data-toggle="tab">Tab 2</a>
    <a class="nav-item nav-link" href="#tab3" role="tab" data-toggle="tab">Tab 3</a>
      <a class="nav-item nav-link" href="#tab4" role="tab" data-toggle="tab">Tab 4</a>
        <a class="nav-item nav-link" href="#tab5" role="tab" data-toggle="tab">Tab 5</a>
          <a class="nav-item nav-link" href="#tab6" role="tab" data-toggle="tab">Tab 6</a>
           <a class="nav-item nav-link" href="#tab7" role="tab" data-toggle="tab">Tab 7</a>
            <a class="nav-item nav-link" href="#tab8" role="tab" data-toggle="tab">Tab 8</a>
             <a class="nav-item nav-link" href="#tab9" role="tab" data-toggle="tab">Tab 9</a>
              <a class="nav-item nav-link" href="#tab10" role="tab" data-toggle="tab">Tab 10</a>
               <a class="nav-item nav-link" href="#tab11" role="tab" data-toggle="tab">Tab 11</a>
               <a class="nav-item nav-link" href="#tab12" role="tab" data-toggle="tab">Tab 12</a>
               <a class="nav-item nav-link" href="#tab13" role="tab" data-toggle="tab">Tab 13</a>
               <a class="nav-item nav-link" href="#tab14" role="tab" data-toggle="tab">Tab 14</a>
               <a class="nav-item nav-link" href="#tab15" role="tab" data-toggle="tab">Tab 15</a>
               <a class="nav-item nav-link" href="#tab16" role="tab" data-toggle="tab">Tab 16</a>
 

</nav>
  </div>
    <div class="tab-content" id="myTabContent">
        <div role="tabpanel" class="tab-pane fade active show mt-2" id="tab1" aria-labelledby="public-tab" aria-expanded="true">
           Tab 1
        </div>
        <div class="tab-pane fade mt-2" id="tab2" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 2</p>
        </div>  
        <div class="tab-pane fade mt-2" id="tab3" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 3</p>
        </div>  
        <div class="tab-pane fade mt-2" id="tab4" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 4</p>
        </div>  
        <div class="tab-pane fade mt-2" id="tab5" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 5</p>
        </div>  
        <div class="tab-pane fade mt-2" id="tab6" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 6</p>
        </div>  
         <div class="tab-pane fade mt-2" id="tab7" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 7</p>
        </div>  
         <div class="tab-pane fade mt-2" id="tab8" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 8</p>
        </div>  
         <div class="tab-pane fade mt-2" id="tab9" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 9</p>
        </div>  
         <div class="tab-pane fade mt-2" id="tab10" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 10</p>
        </div>  
         <div class="tab-pane fade mt-2" id="tab11" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 11</p>
        </div>  
        <div class="tab-pane fade mt-2" id="tab12" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 12</p>
        </div>  
        <div class="tab-pane fade mt-2" id="tab13" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 13</p>
        </div>  
        <div class="tab-pane fade mt-2" id="tab14" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 14</p>
        </div>  
        <div class="tab-pane fade mt-2" id="tab15" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 15</p>
        </div>  
        <div class="tab-pane fade mt-2" id="tab16" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 16</p>
        </div>  
        
    </div>
</div>

Answer 1

请参考以下代码。虽然不那么准确，但是仍然做得更好。我已经覆盖了CSS中的现有类。

var scrollBarWidths = 40;
var widthOfList = function(){
  var itemsWidth = 0;
  $('.list a').each(function(){
    var itemWidth = $(this).outerWidth();
    itemsWidth+=itemWidth;
  });
  return itemsWidth;
};
var innerwidth = 0;
var widthofEachNav = function(){
var itemsWidth = 0;
var count = 0;
  $('.list a').each(function(){
    innerwidth = $(this).innerWidth();
    var itemWidth = $(this).outerWidth();
    itemsWidth+=itemWidth;
	count++
  });
  console.log(itemsWidth+"  "+count+"     width"+(itemsWidth/count ))
  return (itemsWidth/count);
}
var widthNav = widthofEachNav();
var getLeftPosi = function(){
  return $('.list').position().left;
};
var widthOfHidden = function(){
  return (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi());
};
var hidvith = widthOfHidden();

$('.scroller-right').click(function() {
  $('.scroller-left').fadeIn('slow');
if(widthOfHidden()<0 && getLeftPosi()<=0){
	$('.list').animate({left:"-="+widthNav+"px"},'slow',function(){  });
}
  
});

$('.scroller-left').click(function() {
	$('.scroller-right').fadeIn('slow');
  if(getLeftPosi()<0 ){
	$('.list').animate({left:"+="+widthNav+"px"},'slow',function(){  	});
  }
  	
});   
$(window).on('resize',function(e){  
  	reAdjust();
});
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();

	  
  }

  $('.scroller-right').show();
}

reAdjust();

.closeBtn:focus {
  outline: none;
}
.w-100.p-3 {
    max-width: 50%;
}

    .close{
        color: gray;
      }

.wrapper {
    position:relative;
    margin:0 auto;
    overflow:hidden;
	padding:5px;
  	height:50px;
}

.list {
    position:absolute;
    left:0px;
    top:0px;
  	min-width:3500px;
  	
    margin-top:0px;
}

.list li{
	display:table-cell;
    position:relative;
    text-align:center;
    cursor:grab;
    cursor:-webkit-grab;
    color:#efefef;
    vertical-align:middle;
}

.scroller {
  text-align:center;
  cursor:pointer;
  display:none;
  padding:7px;
  padding-top:11px;
  white-space:no-wrap;
  vertical-align:middle;
  background-color:#fff;
}

.scroller-right{
  float:right;
}

.scroller-left {
  float:left;
}
.xyzzz {
    max-width: 27% !important;
    min-width: 20% !important;
}

.w-100.p-3 {
    max-width: 55% !important;
}
nav#myTab {
    margin-left: -5px !important;
}

.scroller.scroller-right.mt-2 {
    margin-right: -30px !important;
}

<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- <script src="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></script> -->
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div class="w-100 p-3">

  <div class="scroller scroller-left mt-2"><i class="fa fa-chevron-left"><</i></div>
  <div class="scroller scroller-right mt-2"><i class="fa fa-chevron-right"></i>></div>
  <div class="wrapper">
   <nav class="nav nav-tabs list mt-2" id="myTab" role="tablist">
  <a class="nav-item nav-link active" data-toggle="tab" href="#tab1" style="margin-left: 21px" role="tab" aria-controls="public" aria-expanded="true">Tab 1</a>
  <a class="nav-item nav-link" href="#tab2" role="tab" data-toggle="tab">Tab 2</a>
    <a class="nav-item nav-link" href="#tab3" role="tab" data-toggle="tab">Tab 3</a>
      <a class="nav-item nav-link" href="#tab4" role="tab" data-toggle="tab">Tab 4</a>
        <a class="nav-item nav-link" href="#tab5" role="tab" data-toggle="tab" style="margin-left: 7px;">Tab 5</a>
          <a class="nav-item nav-link" href="#tab6" role="tab" data-toggle="tab">Tab 6</a>
           <a class="nav-item nav-link" href="#tab7" role="tab" data-toggle="tab">Tab 7</a>
            <a class="nav-item nav-link" href="#tab8" role="tab" data-toggle="tab">Tab 8</a>
             <a class="nav-item nav-link" href="#tab9" role="tab" data-toggle="tab">Tab 9</a>
              <a class="nav-item nav-link" href="#tab10" role="tab" data-toggle="tab">Tab 10</a>
               <a class="nav-item nav-link" href="#tab11" role="tab" data-toggle="tab">Tab 11</a>
               <a class="nav-item nav-link" href="#tab12" role="tab" data-toggle="tab">Tab 12</a>
               <a class="nav-item nav-link" href="#tab13" role="tab" data-toggle="tab">Tab 13</a>
               <a class="nav-item nav-link" href="#tab14" role="tab" data-toggle="tab">Tab 14</a>
               <a class="nav-item nav-link" href="#tab15" role="tab" data-toggle="tab">Tab 15</a>
               <a class="nav-item nav-link" href="#tab16" role="tab" data-toggle="tab" style="margin-left: -6px;">Tab 16</a>
 

</nav>
  </div>
    <div class="tab-content" id="myTabContent">
        <div role="tabpanel" class="tab-pane fade active show mt-2" id="tab1" aria-labelledby="public-tab" aria-expanded="true">
           Tab 1
        </div>
        <div class="tab-pane fade mt-2" id="tab2" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 2</p>
        </div>  
        <div class="tab-pane fade mt-2" id="tab3" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 3</p>
        </div>  
        <div class="tab-pane fade mt-2" id="tab4" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 4</p>
        </div>  
        <div class="tab-pane fade mt-2" id="tab5" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 5</p>
        </div>  
        <div class="tab-pane fade mt-2" id="tab6" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 6</p>
        </div>  
         <div class="tab-pane fade mt-2" id="tab7" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 7</p>
        </div>  
         <div class="tab-pane fade mt-2" id="tab8" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 8</p>
        </div>  
         <div class="tab-pane fade mt-2" id="tab9" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 9</p>
        </div>  
         <div class="tab-pane fade mt-2" id="tab10" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 10</p>
        </div>  
         <div class="tab-pane fade mt-2" id="tab11" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 11</p>
        </div>  
        <div class="tab-pane fade mt-2" id="tab12" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 12</p>
        </div>  
        <div class="tab-pane fade mt-2" id="tab13" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 13</p>
        </div>  
        <div class="tab-pane fade mt-2" id="tab14" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 14</p>
        </div>  
        <div class="tab-pane fade mt-2" id="tab15" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 15</p>
        </div>  
        <div class="tab-pane fade mt-2" id="tab16" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
            <p class="">Tab 16</p>
        </div>  
        
    </div>
</div>