Rodrigo Dias Rodrigo Dias - 2 months ago 7
jQuery Question

Stop scrolling when viewing last item - with jQuery

I have a list of dynamic items that possesses a scroll like a slide, and I can not set a limit to the scroll with the arrow when the last item of the list is displayed.

Any idea how I can stop scrolling when viewing the last item? Example here: JSFIDDLE

$('.nextArrow').click(function() {
//Animate the images to next slide
$('.thumbs li:eq(0)').animate({"margin-top": "-=80"}, 500);
});

$('.prevArrow').click(function() {
var marginTopValue = $('.thumbs li:eq(0)').css('margin-top');
//Animate the image to previous slide
if (marginTopValue == '0px') {

} else {
$('.thumbs li:eq(0)').animate({"margin-top": "+=80"}, 500);
};
});

Answer

Change

$('.nextArrow').click(function() {
    //Animate the images to next slide
    $('.thumbs li:eq(0)').animate({"margin-top": "-=80"}, 500);             
});

to

$('.nextArrow').click(function() {
        //Animate the images to next slide
  var marginTopValue = parseInt($('.thumbs li:eq(0)').css('margin-top').replace('px', ''));
  if (marginTopValue >= (0-$('.thumbs')[0].scrollHeight))
  {
        $('.thumbs li:eq(0)').animate({"margin-top": "-=80"}, 500);
  }
    });

JSFIDDLE here!