javascript - 可滚动选项卡快速滚动

Question

我有工作可滚动选项卡的名称。问题是:当我有很多选项卡并滚动时，它会将我带到最后一个选项卡。我想滚动几个选项卡，然后单击右键再次滚动。与左侧滚动条相同。

<强> Example

示例插件，但无法在我的网站上使用。

<强> Plugin

HTML

<div class="container">
  <div class="scroller scroller-left"><i class="glyphicon glyphicon-chevron-left"></i></div>
  <div class="scroller scroller-right"><i class="glyphicon glyphicon-chevron-right"></i></div>
  <div class="wrapper">
    <ul class="nav nav-tabs list" id="myTab">
      <li class="active"><a href="#home">Home</a></li>
      <li><a href="#profile">Profile</a></li>
      <li><a href="#messages">Messages</a></li>
      <li><a href="#settings">Settings</a></li>
      <li><a href="#">Tab4</a></li>
      <li><a href="#">Tab5</a></li>
      <li><a href="#">Tab6</a></li>
      <li><a href="#">Tab7</a></li>
      <li><a href="#">Tab8</a></li>
      <li><a href="#">Tab9</a></li>
      <li><a href="#">Tab10</a></li>
      <li><a href="#">Tab11</a></li>
      <li><a href="#">Tab12</a></li>
      <li><a href="#">Tab13</a></li>
      <li><a href="#">Tab14</a></li>
      <li><a href="#">Tab15</a></li>
      <li><a href="#">Tab16</a></li>
      <li><a href="#">Tab17</a></li>
         <li><a href="#">Tab18</a></li>
      <li><a href="#">Tab19</a></li>
      <li><a href="#">Tab20</a></li>
      <li><a href="#">Tab21</a></li>
      <li><a href="#">Tab22</a></li>
      <li><a href="#">Tab23</a></li>
      <li><a href="#">Tab24</a></li>
      <li><a href="#">Tab25</a></li>
      <li><a href="#">Tab26</a></li>
      <li><a href="#">Tab27</a></li>
      <li><a href="#">Tab28</a></li>
      <li><a href="#">Tab29</a></li>
      <li><a href="#">Tab30</a></li>
      <li><a href="#">Tab31</a></li>
         <li><a href="#">Tab32</a></li>
      <li><a href="#">Tab33</a></li>
      <li><a href="#">Tab34</a></li>
      <li><a href="#">Tab35</a></li>
      <li><a href="#">Tab36</a></li>
      <li><a href="#">Tab37</a></li>
      <li><a href="#">Tab38</a></li>
      <li><a href="#">Tab39</a></li>
      <li><a href="#">Tab40</a></li>

  </ul>
  </div>
</div>

Jquery

    var hidWidth;
var scrollBarWidths = 40;

var widthOfList = function(){
  var itemsWidth = 0;
  $('.list li').each(function(){
    var itemWidth = $(this).outerWidth();
    itemsWidth+=itemWidth;
  });
  return itemsWidth;
};

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

var getLeftPosi = function(){
  return $('.list').position().left;
};

var reAdjust = function(){
  if (($('.wrapper').outerWidth()) < widthOfList()) {
    $('.scroller-right').show();
  }
  else {
    $('.scroller-right').hide();
  }

  if (getLeftPosi()<0) {
    $('.scroller-left').show();
  }
  else {
    $('.item').animate({left:"-="+getLeftPosi()+"px"},'slow');
    $('.scroller-left').hide();
  }
}

reAdjust();

$(window).on('resize',function(e){  
    reAdjust();
});

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

滚动时必须使用包装器的宽度。 Here is a demo

$('.scroller-right').click(function() {

    $('.scroller-left').fadeIn('slow');

    $remained = $('.list').width() - $('.wrapper').width() + parseInt($('.list').css('left'));

    if ($remained >= $('.wrapper').innerWidth()) {
        $left = $('.wrapper').innerWidth();
    } else {
        $left = $remained;
        $('.scroller-right').fadeOut('slow');
    }

    $('.list').animate({left:"-=" + $left + "px"},'slow');
});

$('.scroller-left').click(function() {

    $('.scroller-right').fadeIn('slow');

    if (-parseInt($('.list').css('left')) > $('.wrapper').innerWidth()) {
        $left = -$('.wrapper').innerWidth();
    } else {
        $left = parseInt($('.list').css('left'));
        $('.scroller-left').fadeOut('slow');
    }

    $('.list').animate({left:"-=" + $left + "px"},'slow');
});