分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – 在引导选项卡之间切换时保持滚动位置，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

我创造了一个小提琴来说明问题：
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>

解决方法

请检查以下解决方案,它可以单独工作并支持每个标签：

$(".tab-body").mCustomScrollbar({
  theme: 'minimal-dark',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'));
});