Question

我上周在jQuery Tools官方论坛上问了这个问题，但它肯定没有stackoverflow那么活跃，所以我想在这里也会问。

在我们的项目详细信息页面上，我们动态加载内容，使用垂直滚动条进行导航。问题是垂直卷轴的高度似乎总是一个项目太高。我找不到以编程方式影响此方法的任何方法。

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

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

未公开的JS在这里： http://www.centerline.net/lib/js/site-unmin.js

有什么想法吗？

这是滚动到最后一项时应该是什么样子的视图（向下箭头消失，并且不允许最后一个缩略图下方的空白区域。 Correct Vertical Scroller Stop Point

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工具会滚动所有图像。在最后的图像之后，只有一些空白区域。

尝试将其添加到可滚动构造函数

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

OR

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工具。但我认为这将是一条路。

jQuery工具 - 垂直滚动器一个项目太长

3 个答案: