All geek questions in one place

Keep scroll position when switching between boot tabs

I have Bootstrap tabs that switch between panels that use the Malihu custom content scrollbar plugin to override browser scrollbars. However, when you click on different tabs, the scroll position is not supported in the previous time when you viewed the tab. The scroll position of the panel will return to the top. Is there something I can do to keep the scroll position?

I created a fiddle to illustrate the problem: 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>
Run code
+4
source share
5

, , :

$(".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

+3

CSS ,

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

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

Fiddle Link

+2

, ( <p>).

:

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

:

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

- = jsFiddle = -

0

. 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.imtqy.com/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.imtqy.com/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>
0

using css you can show and hide your tabs and save your scroll positions where they stayed like

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

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

Source: https://habr.com/ru/post/1681512/

More articles:


All Articles