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

乾杯