javascript - 如何将 jquery 脚本限制为容器 div 的大小

Question

我还创建了一个画廊和按钮来控制画廊。我是 jquery 的新手，并使用一个小脚本在 div 容器上按固定数量更改边距。该脚本效果很好，但它超出了 div 内容的顶部和底部。我会为 div 设置一个特定的大小，但我的想法是在内容量不同的多个页面上使用它。如何限制按钮功能不超出 div 内的内容？

 $('.scrolltdup').click(function(event) {
  event.preventDefault();
  $('.wrap').animate({
    marginTop: "+=160px"
  }, "fast");
 });

$('.scrolltddown').click(function(event) {
  event.preventDefault();
  $('.wrap').animate({
    marginTop: "-=160px"
  }, "fast");
});

我做了一个jsfiddle与我拥有的页面内容。任何帮助将不胜感激。这是我第一个使用 html5、CSS3 和 jquery 从零开始的网站。这是一次学习经历。 :)

提前致谢

Answer 1

只需添加一些 if 语句:

更新 fiddle :https://jsfiddle.net/2LcumL6p/4/

$('.scrolltdup').click(function(event) {
    event.preventDefault();
    if (parseInt($('.wrap').css('margin-top')) < 0) {
        $('.wrap').animate({
            marginTop: "+=160px"
        }, "fast");
    }
});

$('.scrolltddown').click(function(event) {
    event.preventDefault();
    if (parseInt($('.wrap').css('margin-top')) > -($('.wrap').height() - 160)) {
        $('.wrap').animate({
            marginTop: "-=160px"
        }, "fast");
    }
});