jquery - 在 Bootstrap 选项卡之间切换时保持滚动位置

Question

我有 Bootstrap 选项卡，可以在使用 Malihu custom content scrollbar plugin 的 Pane 之间切换覆盖浏览器滚动条。但是，当您单击不同的选项卡时，滚动位置不会保持上次查看该选项卡时的位置。 Pane 的滚动位置返回到顶部。我可以做些什么来保持滚动位置吗？

我创建了一个 fiddle 来说明这个问题: 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>

Answer 1

请检查以下解决方案，它可以单独工作并支持每个选项卡:

$(".tab-body").mCustomScrollbar({
  theme: 'minimal-dark',
  alwaysShowScrollbar: 0,
  autoHideScrollbar: true,
  advanced: {
    updateOnContentResize: true
  },
  mouseWheel: {
    scrollAmount: 150
  },
  scrollInertia: 350,
  callbacks: {
    onScroll: function() {
        var closestTabId = $(this).closest('.tab-pane').attr('id');
      $('[data-toggle="tab"][href="#'+closestTabId+'"]').data('scrolled', $(this).find('.mCSB_container').css('top'));
    }
  }
})

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {

   console.log($(e.target).data());

  $('.tab-pane.active'+$(e.target).attr('href')+' .mCSB_container').css('top', $(e.target).data('scrolled'));
});

Fiddle Link