How to do a smooth-scroll?

Question

I have the following working code to make a element of my scrollbox visible:

var next = elements.item(i+1);
var xpcomInterface = scroll.boxObject.QueryInterface(
Components.interfaces.nsIScrollBoxObject);
xpcomInterface.ensureElementIsVisible(elements);

But I would like to make a smooth-scroll (slow or not). Any idea how to do it?

update

By the way, it's for Mozilla environment.

Answer 1

The simplest way would be to just use a setTimeout function and just keep moving the top and left value on the element's div by a small number, until you get where you want to be.

You may want to experiment with how fast to make it move, as there is a trade-off with smooth, and the fact that it should reach the endpoint in some reasonable time.

Update:

I forgot, you will want to keep calling the setTimeout until you reach the final destination, otherwise it won't redraw the browser window.

Answer 2

I don't know exactly how to do it, but here's a Chrome Extension called "Smooth Scroll" where you can potentially pick through the code to see what they do and maybe get you in the right direction.

PS I love this extension.

Answer 3

jQuery .animate() with accelerated motion can be kind of smooth (see demo for animate with a relative move). And with a plug-in, there are other easing equations it can use.