如何以较小的增量滚动水平自举选项卡

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