Bootstrap垂直滚动标签

Question

我有这个代码：

var hidWidth;
var scrollBarWidths = 40;

var widthOfList = function(){
  var itemsWidth = 0;
  $('.list li').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();
  }
  else {
    $('.scroller-right').hide();
  }
  
  if (getLeftPosi()<0) {
    $('.scroller-left').show();
  }
  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(){
  	
  	});
});

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

.list {
    position:absolute;
    left:0px;
    top:0px;
  	min-width:3000px;
  	margin-left:12px;
    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;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" type="text/css" />

<div class="container">
  <div class="scroller scroller-left"><i class="glyphicon glyphicon-chevron-left"></i></div>
  <div class="scroller scroller-right"><i class="glyphicon glyphicon-chevron-right"></i></div>
  <div class="wrapper">
    <ul class="nav nav-tabs list" id="myTab">
      <li class="active"><a href="#home">Home</a></li>
      <li><a href="#profile">Profile</a></li>
      <li><a href="#messages">Messages</a></li>
      <li><a href="#settings">Settings</a></li>
      <li><a href="#">Tab4</a></li>
      <li><a href="#">Tab5</a></li>
      <li><a href="#">Tab6</a></li>
      <li><a href="#">Tab7</a></li>
      <li><a href="#">Tab8</a></li>
      <li><a href="#">Tab9</a></li>
      <li><a href="#">Tab10</a></li>
      <li><a href="#">Tab11</a></li>
	  <li><a href="#">Tab12</a></li>
      <li><a href="#">Tab13</a></li>
      <li><a href="#">Tab14</a></li>
	  <li><a href="#">Tab15</a></li>
      <li><a href="#">Tab16</a></li>
      <li><a href="#">Tab17</a></li>
  </ul>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>

Prview

上面的代码创建了一个水平菜单。它工作得很好。菜单有水平滚动的箭头。

我想把它们变成垂直的，150px高。怎么做？

我需要用垂直菜单替换这个菜单。菜单中的项目将从上到下。菜单的高度为150px。怎么做？

Answer 1

这不是实际的，但有点接近您想要的输出！ ：

var hidHeight;
var scrollBarHieghts = 40;
var heightOfList = function(){
  var itemsHeight = 0;
  $('.list li').each(function(){
    var itemHeight = $(this).outerHeight();
    itemsHeight+=itemHeight;
  });
  return itemsHeight;
};
var heightOfHidden = function(){
  return (($('.wrapper').outerHeight())-heightOfList()-getTopPosi())-scrollBarHieghts;
};
var getTopPosi = function(){
  return $('.list').position().top;
};
var reAdjust = function(){
  if (($('.wrapper').outerHeight()) < heightOfList()) {
    $('.scroller-down').show();
  }
  else {
    $('.scroller-down').hide();
  }
  if (getTopPosi()<0) {
    $('.scroller-up').show();
  }
  else {
    $('.item').animate({top:"-="+getTopPosi()+"px"},'slow');
    $('.scroller-up').hide();
  }
}
reAdjust();
$(window).on('resize',function(e){  
  reAdjust();
});
$('.scroller-down').click(function() {
  $('.scroller-up').fadeIn('slow');
  $('.scroller-down').fadeOut('slow');
  $('.list').animate({top:"+="+heightOfHidden()+"px"},'slow',function(){
  });
});
$('.scroller-up').click(function() {
  $('.scroller-down').fadeIn('slow');
  $('.scroller-up').fadeOut('slow');
  $('.list').animate({top:"-="+getTopPosi()+"px"},'slow',function(){
  });
});

.wrapper {
  position: relative;
  margin-top: 25px;
  overflow: hidden;
  padding: 5px;
  height: 90vh;
  width: 100px;
}
.list {
  position: absolute;
  left: 0px;
  top: 0px;
  margin-left: 12px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.list li{
  display: table-cell;
  position: relative;
  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;
  position: absolute;
}
.scroller-up {
  z-index: 100;
  top: 0;
}
.scroller-down{
  z-index: 100;
  bottom: 0;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" type="text/css" />

<div class="container">
  <div class="scroller scroller-up"><i class="glyphicon glyphicon-chevron-up"></i></div>
  <div class="scroller scroller-down"><i class="glyphicon glyphicon-chevron-down"></i></div>
  <div class="wrapper">
    <ul class="nav nav-pills nav-stacked list" id="myTab">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Profile</a></li>
      <li><a href="#">Messages</a></li>
      <li><a href="#">Settings</a></li>
      <li><a href="#">Tab4</a></li>
      <li><a href="#">Tab5</a></li>
      <li><a href="#">Tab6</a></li>
      <li><a href="#">Tab7</a></li>
      <li><a href="#">Tab8</a></li>
      <li><a href="#">Tab9</a></li>
      <li><a href="#">Tab10</a></li>
      <li><a href="#">Tab11</a></li>
      <li><a href="#">Tab12</a></li>
      <li><a href="#">Tab13</a></li>
      <li><a href="#">Tab14</a></li>
      <li><a href="#">Tab15</a></li>
      <li><a href="#">Tab16</a></li>
      <li><a href="#">Tab17</a></li>
    </ul>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>