Home/ Questions/Q 6143223
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T18:29:46+00:00

I have a div containing several images, with the overflow hidden, which slowly scrolls

  • 0

I have a div containing several images, with the overflow hidden, which slowly scrolls down. I would like, when the scroll gets to the bottom, to clone the first element and append it to the bottom, so it will continue scrolling.

All this so far I have accomplished, except it doesn’t keep scrolling, because the scrollHeight property is still the original value. Is there any way to update the scrollHeight value of the div?

My script so far:

$(document).ready(function() {
$("#carousel").scrollTop(0);
intervalID = setInterval("scrollCarousel()",50);

carousel = document.getElementById("carousel");
});

function scrollCarousel() {


if ( $("#carousel").scrollTop() > $("#carousel:first").height() ||
        $("#carousel").scrollTop() + carousel.offsetHeight >
        carousel.scrollHeight ) {

    elem = $("#carousel").children(':first-child').clone();
    console.debug(elem);
    elem.appendTo($("#carousel"));
    carousel.scrollHeight += elem.height;
}
else {
    $("#carousel").scrollTop( $("#carousel").scrollTop() + 1 );
}
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here you go:

    http://jsfiddle.net/Paulpro/bPrY7/

    You had a few mistakes:

    First of all you shouldn’t put a string in setInterval. Especially when you are just calling a function. Since strings get parsed by eval they are quite slow.

    Secondly you want to remove the element from the top when you append it to the bottom, and then just adjust the scroll position accordingly.

    Also $(“#carousel”) is a lot slower than $(carousel) when you already have the DOM element.

    • 0