soledad penadés

There's a new way of invoking the scroll functions in JavaScript where you can specify how do you want the scroll to behave: smoothly, immediately, or auto (whatever the user agent wants, I guess).

window.scrollBy({ top: 100, behavior: 'smooth' });

(note it's behavior, not behaviour, argggh).

I read this post yesterday saying that it would be available (via this tweet from @FirefoxNightly) and immediately wanted to try it out!

I made sure I had an updated copy of Firefox Nightly---you'll need a version from the 28th of October or later. Then I enabled the feature by going to about:config and changing layout.css.scroll-behavior.enabled to true. No restart required!

My test looks like this:

(source code)

You can also use it in CSS code:

#myelement {
  scroll-behavior: smooth;
}

but my example doesn't. Feel like building one yourself? :)

The reason why I'm so excited about this is that I've had to implement this behaviour with plug-ins and what nots that tend to interfere with the rendering pipeline many, many times and it's amazing that this is going to be native to the browser, as it should be smooth and posh. And also because other native platforms have it too and it makes the web look "not cool". Well, not anymore!

The other cool aspect is that it degrades great---if the option is not recognised by the engine you will just get... a normal abrupt behaviour, but it will still scroll.

I'm guessing that you can still use your not-so-performant plug-ins if you really want your own scroll algorithm (maybe you want it to bounce in a particular way, etc). Just use instant instead of smooth, and you should be good to go!

SCROLL SCROLL SCROLL SCROLL!

Update: Frontender magazine translated this post to Russian.