Maintain scroll position when switching between bootstrap tabs

I have Bootstrap tabs that switch between panes which are using the Malihu custom content scrollbar plugin to override the browser scrollbars. However, when you click the different tabs, the scroll position is not maintained from the previous time you viewed the tab. The pane's scroll position returns to the top. Is there something I can do to maintain the scroll position?

I've created a fiddle to illustrate the issue: http://jsfiddle.net/zfh3u37k/3/

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

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.0.0/jquery.mCustomScrollbar.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.0.0/jquery.mCustomScrollbar.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

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

Maintain scroll position when switching between bootstrap tabs

4 Answers