How do I make my scrolling smooth?

Question

I have written a scroller function which will scroll one div inside another one. The idea is to use the setInterval method to change the margin of the inner element to simulate a scrolling div.

The problem I am facing is that the scrolling is not entirely smooth. Sometimes it stops for a split-second and then it resumes. What can I do to remove these random hiccups? (I am moving 1px per 20 milliseconds)

Answer 1

Use jQuery's .animate() method instead setInterval().

$('div.myclass').animate({
   'scrollLeft':   '+=400'
}, 4000);

as an example.

You can use both, scrollLeft and scrollTop as animate property.