Making a Case for SetInterval

by serio

HTML

<div id='container'>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue orci eget nunc vulputate dignissim. Suspendisse elementum, ante sed adipiscing convallis, odio erat congue est, in aliquam risus tellus at ligula. Donec mollis, dui in suscipit gravida, lacus felis faucibus libero, eget rhoncus lacus nunc non odio. Mauris justo massa, iaculis id gravida sit amet, vestibulum vitae tortor. Vivamus ipsum ligula, faucibus non molestie ornare, dignissim vel risus. Quisque lacinia nisi vitae nisi egestas eu hendrerit mauris sollicitudin. In consequat sagittis justo ut vehicula. In hac habitasse platea dictumst. Phasellus volutpat dapibus tellus vel cursus. Mauris turpis nisl, sollicitudin eu luctus vitae, consequat nec leo. Sed id diam sed nisi sagittis cursus nec at nibh. Aenean ultricies sapien vel nulla ullamcorper lacinia. Sed in elit erat. Aenean sagittis egestas placerat. Nulla pulvinar diam sit amet erat posuere elementum. Duis magna tortor, aliquam vel mattis sed, rutrum id neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fermentum odio libero.

Cras et massa dui. Curabitur rhoncus tristique urna, at vehicula est posuere vitae. Quisque felis augue, consectetur non hendrerit at, faucibus a velit. Mauris id sapien sollicitudin nulla tincidunt cursus. Morbi sed dolor et urna tincidunt sollicitudin id ac metus. In a turpis mollis libero ultrices molestie vitae vel diam. Pellentesque tempor, libero eget tempus congue, ligula risus facilisis nibh, nec lacinia metus diam ut lorem. Sed placerat enim ac dolor suscipit ac facilisis nulla vehicula. Aenean enim turpis, viverra sed pellentesque id, cursus in lorem. Mauris quis arcu elementum augue tempor volutpat id sit amet felis. Morbi dictum venenatis dui at fringilla. Suspendisse potenti. Sed accumsan porta gravida. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut ut ligula id est placerat sodales. Sed dolor tellus,...

CSS

body { font: 100% helvetica, arial, sans-serif; }

#container { width: 100px; height: 210px; overflow: hidden; margin-bottom: 20px; }

JavaScript

var timer;
var dir;
var c = $( '#container' );

$( '.up' ).bind( 'mouseover', function( e )
{
    timer = setInterval( function()
    {
        n = c.scrollTop();
        n--;
        c.scrollTop( n );
    }, 1 );
});

$( '.down' ).bind( 'mouseover', function( e )
{
    timer = setInterval( function()
    {
        n = c.scrollTop();
        n++;
        c.scrollTop( n );
    }, 1 );
});

$( '.up, .down' ).bind( 'mouseout', function( e )
{
    clearInterval( timer );
});