4

我正在尝试使用外部按钮做一个可滚动的容器，而不使用插件。我有一个名为#feed 的容器，具有固定的宽度和高度，并且溢出隐藏。在里面我有 #feed-inner，它是 560 像素高。有上下箭头可以上下移动#feed-inner，但我需要限制动画，所以#feed-inner 不能移动到0或最大高度（560px）。

$('#arrow-next').click(function() {
  $('#feed-inner').animate({
    top: '-=70'
  }, 500, function() {
  });
});
$('#arrow-prev').click(function() {
  $('#feed-inner').animate({
    top: '+=70'
  }, 500, function() {
  });
});
4

2 回答 2

2

您可以使用$.position 获取#feed-inner相对于的当前位置的值。有了它，您可以检查位置是否为 0 或最大高度为 560px。代码看起来像这样：#feed

$('#arrow-next').click(function() {
  $('#feed-inner').animate({
    top: parseInt($('#feed-inner').position().top) == 0 ? '0' : '-=70'
  }, 500, function() {
  });
});
$('#arrow-prev').click(function() {
  $('#feed-inner').animate({
    top: parseInt($('#feed-inner').position().top) == 560 ? '560' : '+=70'
  }, 500, function() {
  });
});

请注意，#arrow-next这将#feed-inner向上（使内容看起来像是向下滚动），这似乎与标签“下一个”相反，反之亦然#arrow-prev。

还有一点需要注意的是，当#feed-inner到达的位置时560px，将有一个空白画布，因为元素已完全移动到底部，您将看到一个空#feed容器。为避免这种情况，您需要计算#feed容器的高度并确保#feed-inner不会移动通过 560 -$(#feed).outerHeight();

于 2012-11-06T06:26:45.557 回答
0

看起来您只需要在单击函数中添加一些条件语句，不是吗？ 

if($('#feed-inner').position().top >= 70){

将检查顶部距离是否大于或等于 70。

我不知道您的最大高度值是否是动态的。

if($('#feed-inner').position().top <= $('#feed-inner').css('maxHeight').split('px')[0]){

将检查顶部距离是否小于最大高度。

不幸的是，maxHeight 不能作为原始整数访问，因此我们必须在 上拆分字符串px并获取数组的第一组以获取原始整数。

于 2012-11-06T06:22:14.920 回答