Native smooth scrolling with JS

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:

native smooth scrolling

(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.

MozFest 2014, day 2

As I was typing the final paragraphs of my previous post, hundreds of Flame devices were being handed to MozFest attendees that had got involved on sessions the day before.

When I arrived (late, because I felt like a lazy slug), there was a queue in the flashing station, which was, essentially, a table with a bunch of awesome Mozilla employees and volunteers from all over the world, working in shifts to make sure all those people with phones using Firefox OS 1.3 were upgraded to 2.1. I don’t have the exact numbers, but I believe the amount was close to 1000 phones. One thousand phones. BAM. Super amazing work, friends. **HATS OFF**

Continue reading

A VERY BELATED Mozilla Festival 2013 post

Note: I started writing this past year after the festival finished, and then I went heads down into an spiral of web audio hacking and conferencing and what not, so I didn’t finish it.

But with the festival starting this Friday, it’s NOW OR NEVER!

Ahead with the PUBLISH button!

~~~

(AKA #MozFest everywhere else)

MozFest finished a week almost a year ago already, but I’m still feeling its effects on my brain: tons of new ideas, and a pervasive feeling of not having enough time to develop them all. I guess it’s good (if I manage it properly).

I came to the Festival without knowing what it would be about. The Mozilla London office had been pretty much taken over by the Mozilla Foundation people from all over the world who were doing their last preparations in there. Meeting rooms were a scarce resource, and one of them was even renamed as “MF WAR ROOM”, until someone came next day and re-renamed it as “MW PEACE ROOM”. So, it was all “a madhouse”, in Potch’s words, but amicable, friendly chaos after all. Hard to gather what the festival would consist of, though. So I just waited until Friday…
Continue reading

This week… and beyond

  • Monday: shyly open my inbox after a week of holidays, and probably duck to avoid the rolling ball of stale mail coming my way.
  • Wednesday: maybe meet Karolina who’s in London for a conference!
  • Thursday: my talk is closing a conference O_O — when the organiser mentioned “closing” the day I thought he meant closing the first day, not the second. NO PRESSURE. Although the conf is held at Shoreditch Village Hall, which is a venue where I feel like at home, so I’ll probably be OK. There’s a meatspace meatup afterwards, and I’m glad it’s around Shoreditch too or I’ll be dropping on that.
  • Friday: MozFest facilitators meeting, and also the Science Fair during the evening (if it is still called Science Fair)
  • Saturday and Sunday: MozFest, MozFest, MozFest! Paul Rouget asked me to show WebIDE there, and then Bobby (aka SecretRobotron and your best friend) came up with this idea of a MEGABOOTH where people can go and learn something about app-making in sessions of 5-20 minutes. Of course I can’t be all week-end there or I’ll basically die of social extenuation, so I asked some friends and together we’ll be helping spread the word about Firefox OS development in its various facets: Gaia/Gonk/the operating system itself, Gaia apps, DevTools and WebIDE. Come to the MEGABOOTH and hang with Nicola, Wilson, Francisco, Potch and me! (linking to myself and wondering if the Internet will break with so much recursion, teehee)

Continue reading