javascript - 如何以较小的增量滚动水平引导选项卡

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

在 fiddle 中，使用小得多的窗口，可以更清楚地看到滚动条如何直接转到列表中的最后一个选项卡

Answer 1

按照目前的设置方式，您将获得使用此变量/函数滚动的数量。

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

您需要计算每次点击要移动多少像素。它大约是-220px，你可以手动输入它来试试。您可以手动将其放入，如下所示，然后查看事情的表现是否接近您希望的方式。

var widthOfHidden = function(){ 返回-224； };