Infinite smooth horizontal scroll without a plugin?

Question

I'd like to create an infinite side scrolling div without using extra plugins (besides jquery). I found this one: http://www.smoothdivscroll.com/

The problem is not only is it its own plugin, it also utilizes the jqueryUI... adding a bunch of code weight.

Here's what I have

<div id="columnWrapper">
    <div id="columnSlider">
       <div class="column"></div>
       <div class="column"></div>
       <div class="column"></div>
       <div class="column"></div>
    </div>
</div>

For the javascript, I have a timer set to every 10 milliseconds, manipulating the left margin of the enitre #columnScroll by a few pixels each time.

var sliderInt=self.setInterval(function(){
    $('#columnSlider').css('margin-left',totalMargin);
    totalMargin -= .5;
},10);

What I really need is for the left side of #columnSlider and the right side of the same div to butt ends once the left side is off screen (so that it scrolls sideways infinitely).

Thanks in advance

Answer 1

You could try something like this, it's actually a plugin I wrote to re-use but you can take it out of plugin form like below, you'll just need to add the correct elements and change element references, I think this is currently a vertical scroll too but - easy to change:

function initInfiniteScroll(){
var $carousel, $prevTrigger, $nextTrigger, itemHeight;
    $carousel = $('#alternate-views');
    $prevTrigger = $('.scroll-up');
    $nextTrigger = $('.scroll-down');
    itemHeight = 106;
    $allItems = $carousel.children().clone();
    $allItems.appendTo($carousel);
    $allItems.prependTo($carousel);

    $prevTrigger.click(function() {
        scrollCarousel('up');
        return false;
    });
    $nextTrigger.click(function() {
        scrollCarousel();
        return false;
    }); 

    function scrollCarousel(direction) {
        if (direction == 'up')
        {
            $carousel.animate({
                'top': '+=' + itemHeight
            },1000,function(){
                $carousel.children(':last').clone().prependTo($carousel);
                $carousel.children(':last').remove(); 
                $carousel.css({'top':'-' + itemHeight + 'px'});
            });
        }
        else
        {
            $carousel.animate({
                'top': '-=' + itemHeight
            },1000,function(){
                $carousel.children(':first').clone().appendTo($carousel);
                $carousel.children(':first').remove();  
                $carousel.css({'top':'-' + itemHeight + 'px'});
            });
        }
    }
}

This does clone the entire load and put it either side of the original scroller too - but you can remove this, also if you're using jquery 1.4+ you can take out the cloning and instead detach and re-add the items as you scroll.

Also - if you want to do a setTimeout, just use the content from the click function and put a timer around it. Hope this helps.