Question

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

我创造了一个小提琴来说明问题： http://jsfiddle.net/zfh3u37k/3/

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

使用以下CSS来保持滚动位置，如

.tab-content>.tab-pane {
  display: block;
  width: 0;
  height: 0;
}

.tab-content>.active {
  display: block;
  width: initial;
  height: initial;
}

Fiddle Link

Answer 3

如果所有标签内容具有相同的大小（相同数量的<p>元素），则可以使用以下逻辑。

滚动标签内容后获取滚动位置：

callbacks: {
    onScroll: function() {
      $(document).data('scrolled', $(this).find('.mCSB_container').css('top'));
    }
  }

使用相关的bootstrap tab事件在需要时设置：

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
  $('.tab-pane.active .mCSB_container').css('top', $(document).data('scrolled'));
});

-=Updated jsFiddle=-

Answer 4

请看下面的解决方案。这是在http://jsfiddle.net/zfh3u37k/9/

的工作

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,
  callbacks: {
    onScroll: function() {
    vartabId='#'+$(this).find('.mCSB_container').parents('.tab-pane').attr('id');
    if ((vartabId == '#home')) {
        sessionStorage.homeScroll = $(this).find('.mCSB_container').css('top');
    } else if ((vartabId == '#menu1'))  {
        sessionStorage.menu1Scroll = $(this).find('.mCSB_container').css('top');
    }
    else if ((vartabId == '#menu2'))  {
        sessionStorage.menu2Scroll = $(this).find('.mCSB_container').css('top');
    }
    }
    }
});

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var target = $(e.target).attr("href");
    if ((target == '#home')) {
        $('.tab-pane.active .mCSB_container').css('top', sessionStorage.homeScroll);
    } else if ((target == '#menu1'))  {
        $('.tab-pane.active .mCSB_container').css('top', sessionStorage.menu1Scroll);
    }
    else if ((target == '#menu2'))  {
       $('.tab-pane.active .mCSB_container').css('top', sessionStorage.menu2Scroll);
    }
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://malihu.github.io/custom-scrollbar/3.0.0/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="http://malihu.github.io/custom-scrollbar/3.0.0/jquery.mCustomScrollbar.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>



<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 5

使用css，您可以显示并隐藏选项卡并保持其离开的滚动位置

.tab-content>.tab-pane {
  display: block;
  width: 0;
  height: 0;
}

.tab-content>.active {
  display: block;
  width: initial;
  height: initial;
}

在引导选项卡之间切换时保持滚动位置

5 个答案: