Как прокрутить горизонтальные вкладки начальной загрузки в меньших приращениях

Question

Я пытаюсь прокрутить мои горизонтальные вкладки Bootstrap, однако, скроллер проходит до конца списка вкладок, делая некоторые вкладки даже не видимыми.Так есть ли способ постепенно прокручивать вкладки, пока не дойдете до определенной точки?(тогда я буду в порядке с прокруткой до конца).

Я немного погуглил эту тему, и все примеры, похоже, доходят до конца списка.

jsFiddle: https://jsfiddle.net/82c4ged0/

$('.scroller-right').click(function() {
  
  $('.scroller-left').fadeIn('slow');
  $('.scroller-right').fadeOut('slow');
  
  $('.list').animate({left:"+="+widthOfHidden()+"px"},'slow',function(){
  });
});

$('.scroller-left').click(function() {
  
  $('.scroller-right').fadeIn('slow');
  $('.scroller-left').fadeOut('slow');
  
    $('.list').animate({left:"-="+getLeftPosi()+"px"},'slow',function(){
    });
});

В скрипте, с гораздо меньшим окном, гораздо понятнее увидеть, как скроллер идет прямо к последним вкладкам в списке

Answer 1

То, как все настроено в данный момент, вы получаете сумму для прокрутки с помощью этой переменной / функции.

var widthOfHidden = function(){ return (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi()); };

Вам нужно посчитать, сколько пикселей будет перемещаться при каждом нажатии. Это примерно -220 пикселей, которые вы можете вставить вручную, чтобы попробовать. Вы можете вставить это вручную, как показано ниже, и посмотреть, ведут ли себя вещи так, как вы этого хотите.

var widthOfHidden = function(){ return -224; };