jQuery工具-垂直滚动条一项太长

Question

我上周在jQuery Tools官方论坛上问过这个问题，但它绝对不像stackoverflow那么活跃，所以我想我也会在这里问一下。

在我们的项目细节页面上，我们动态地加载内容，使用垂直滚动条来导航。问题是垂直滚动条的高度总是看起来太高了。我找不到任何以编程方式影响这一点的方法。

如果我将其设置为true，它似乎具有正确的高度，但我们不希望它是连续的/圆形的。

示例如下：http://www.centerline.net/projects/detail/?p=21

未最小化的JS在这里：http://www.centerline.net/lib/js/site-unmin.js

有什么想法吗？

这是滚动到最后一项时的视图(向下箭头消失，并且不允许在最后一个缩略图下面留出空白区域。

​

Answer 1

上面的解决方案看起来是可行的，但在这里也找到了一个解决方案：

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

我网站的实际代码是这样的：

$(function() {
  // Initialize the Scrollable control
  $(".scroll").scrollable({vertical:true, mousewheel:true, keyboard:true });

  // Get the Scrollable control
  var scrollable = jQuery(".scroll").data("scrollable");

  // Set to the number of visible items
  var size = 2;
  // Handle the Scrollable control's onSeek event
  scrollable.onSeek(function(event, index) {

    // Check to see if we're at the end
    if (this.getIndex() >= this.getSize() - size) {

      // Disable the Next link
      jQuery("a.next").addClass("disabled");
    }
  });

  // Handle the Scrollable control's onBeforeSeek event
  scrollable.onBeforeSeek(function(event, index) {

    // Check to see if we're at the end
    if (this.getIndex() >= this.getSize() - size) {

      // Check to see if we're trying to move forward
      if (index > this.getIndex()) {
        // Cancel navigation
        return false;
      }
    }
  });

});

Answer 2

不幸的是，.items容器中的div数量应该可以被您希望一次显示的项目数量整除。所以你有3个div，但是你一次显示2个项目。这就是可滚动插件出现故障的原因。你可以打开非最小化的源代码，然后稍微修改一下，这应该不是很困难。

或者更简单的解决方案是添加一个新的div，并将其设置为4到2。

或者将一次显示的项数减少到1，并增加div的高度。

使用另一个插件也可以。

希望能有所帮助

Answer 3

问题是jQuery工具会滚动所有图像。在最后的图像之后，只有一些空白处。

尝试将其添加到scrollable构造函数中

$('.scroll').scrollable({
   onBeforeSeek: function(e, index) {
        if (index == $('.items').size()) {
            return false;
        }
    },
    onSeek: function(e, index) {
        if (index == $('.items').size()-1) {
            $('.next').hide(0);
        } else {
            if ($('.next').is(':hidden')) {
                $('.next').show();
            }
        }
    }
});

或

api = $('.scroll').scrollable({
   //your setup code
});

api.onBeforeSeek: function(e, index) {
        if (index == this.getSize()) {
            return false;
        }
    }
 api.onSeek: function(e, index) {
        if (index == this.getSize()-1) {
            $('.next').hide(0);
        } else {
            if ($('.next').is(':hidden')) {
                $('.next').show();
            }
        }
    }

免责声明:我不是专家。我还没有测试过这个。你的代码被缩小了，看不清楚。我很少使用jQuery工具。但我认为这是一条可行的道路。