mCustomScrollbar

HTML

<script src="http://malihu.github.io/custom-scrollbar/3.0.0/jquery.mCustomScrollbar.concat.min.js"></script>
<link rel="stylesheet" href="http://malihu.github.io/custom-scrollbar/3.0.0/jquery.mCustomScrollbar.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <div class="tab-body">
    </div>    
  </div>
  <div id="menu1" class="tab-pane fade">
    <div class="tab-body">
    </div> 
  </div>
  <div id="menu2" class="tab-pane fade">
    <div class="tab-body">
    </div> 
  </div>
</div>

CSS

.tab-body {
    height:200px;
    width:200px;
    padding:15px;
    border:1px solid black;
    max-height:200px;
}

JavaScript

var container1 = $('.tab-body');

for (var i = 0; i < 500; i++) {
    container1.append("<p>"+i+"</p>");
}

$(".tab-body").mCustomScrollbar({
  theme: 'minimal-dark',
  alwaysShowScrollbar: 0,
  autoHideScrollbar: true,
  advanced:{ updateOnContentResize: true },
  mouseWheel:{ scrollAmount:150 },
  scrollInertia:350
});