Jquery Tools Scrollable：让它停在最后一个项目

Question

基本上我试图修复Jquery Tools 1.2.6 Scrollable的滚动过去最后一个项目的奇怪习惯，如果项目的数量没有被滚动大小平分。

换句话说，如果我有一个包含11个项目的小部件，并且它被设置为每次显示2并且每次单击下一个按钮以滚动到接下来的2个项目时，当涉及到第11个项目时将滚动以便第十一个显示，但在第十二个项目所在的位置有一个空的空间。本质上滚动未来2到视图尽管没有第二个项目的

这里我有一个演示我修复的jsfiddle：http://jsfiddle.net/natepers/6kmuE/21/

我设法得到它停止在最后一个项目通过重置scroll-size到剩余的物品数量少于scroll-size;

问题是我无法回到第一个项目。

这里的JavaScript：

var scrollable = $(".scrollable").data("scrollable"); 
var size = scrollable.getConf().size; 

// Catch any requests for items at the end of the list 
scrollable.onSeek(function(event, index) { 

    var self_size = this.getSize(); 

    // Last vsisible item 
    var last = index + size; 

    // How many to the last item 
    var difference = self_size - last; 

    // How many more than the scroll size 
    var remainder = index%size; 

    //reset scroll size for each request 
    scrollable.getConf().size = size; 


    // If next request has items but less than the scroll size 
    if (remainder == 0 && difference < size && difference > 0) { 

      // Set the scroll size to th enumber of items left 
      scrollable.getConf().size = difference; 
    } 
    //If we're at the end 
    if (index++ === self_size - size) { 

      // Set disabled style on next button 
      $("a.next").addClass("disabled"); 
    } 
    //If the items are not evenly divided by the scroll size we know we're at the end 
    if (remainder != 0) { 

      // Set scroll size to the what's left 
      scrollable.getConf().size = remainder;   
    } 
}); 

// Stop scrolling at last item 
scrollable.onBeforeSeek(function(event, index) { 
    var self_index = this.getIndex(); 
    var self_size = this.getSize(); 
    var last = self_index + size; 
    //If the last visible item is the last item 
    if (last == self_size) { 
     // If the next requested item is >= the last item do nothing 
     if (index > self_index) { return false; } 
    } 
}); 

感谢您的任何建议或帮助。

Answer 1

我最近有同样的问题。下面这个博客帖子的解决方案似乎为我jQuery的工具1.2.6

http://www.jasoncarr.com/technology/jquery-tools-scrollable-stop-scrolling-past-the-end

Answer 2

我知道这是一个有点老问题很好地工作。我遇到了这种情况，上面提到的链接对我的情况没有帮助。上述链接中描述的解决方案在显示固定数量的项目的情况下工作良好。

但是如果显示的项目数量可能会有所不同？我的任务涉及显示一次滚动一个链接的一堆可滚动链接。总是链接的文字总是会有所不同。我没有办法知道在一个点上会显示多少物品。

这里是插电式的解决方案，我想出了：

$.fn.restrictScroll = function() { 

    var api = $(this).data("scrollable"); 
    var container = this; 

    Init(); 

    // Initialization method. 
    function Init() { 
     // Subscribe to events we are interested in. 
     api.onBeforeSeek(function (event, index) { 
      return isScrollable(index); 
     }); 
     api.onSeek(function (event, index) { 
      changeNavButtonState(index); 
     }); 
     $(window).resize(function() { 
      var index = api.getIndex(); 
      changeNavButtonState(index); 
     }); 

     // set up initial state of the nav button 
     var index = api.getIndex(); 
     changeNavButtonState(index); 
    } 

    function changeNavButtonState(index) { 
     var conf = api.getConf(); 
     $(conf.next).toggleClass(conf.disabledClass, !isScrollable(index)); 
    } 

    function isScrollable(index) { 

     var answer = false; 
     var currentIndex = api.getIndex(); 

     if (index < currentIndex) { // if navigating back, always allow scroll. 
      answer = true; 
     } 
     else { 
      var items = api.getItems(); 
      var itemsWidth = 0; 

      for (var i = currentIndex; i < items.length; i++) { 
       itemsWidth += $(items[i]).width(); 
      } 

      answer = itemsWidth > $(container).width(); 
     } 

     return answer; 
    } 
} 

这里是如何使用这个插件：

$("#scrollable").scrollable().restrictScroll(); 

样本HTML：

<div class="slidingTabs"> 
    <!-- "previous page" action --> 
    <a class="prev browse left"></a> 

    <div class="scrollable" id="scrollable"> 

     <!-- root element for the items --> 
     <div class="items""> 
      <div><a href="#">1 | Some small text</a></div> 
      <div><a href="#">2 | Some long tab name</a></div> 
      <div><a href="#">3 | Three is a crowd</a></div> 
      <div><a href="#">4 | quick brown fox jumps</a></div> 
      <div><a href="#">5 | Bollywood music is awesome</a></div> 
      <div><a href="#">6 | Nicky Minaz is weird looking</a></div> 
      <div><a href="#">7 | Tab number 7</a></div> 
      <div><a href="#">8 | Tab number 8</a></div> 
      <div><a href="#">9 | This one has real long name</a></div> 
     </div> 
    </div> 

    <!-- "next page" action --> 
    <a class="next browse right"></a> 
</div> 

Answer 3

当我遇到这个问题时，我正在寻找其他东西，并且我意识到这有点晚，但几个月前我遇到了类似的问题，并且发现这个答案是René Schubert。提出的解决方案的工作对我非常好：

jQuery Tools Scrollable: 3 Items on screen but scroll one at a time

干杯