Tag Archives: javascript

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!

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

Berlin Web Audio Hack Day 2014

As with the Extensible Web Summit, we wrote some notes collaboratively. Here are the notes for the Web Audio Hackday!

We started the day with me being late because I took a series of badly timed bad decisions and that ended up in me taking the wrong untergrund lines. In short: I don’t know how to metro in Berlin in the mornings and I’m still so sorry.

I finally arrived to Soundcloud’s offices, and it was cool that Jan was still doing the presentations, so Tiffany gave me a giant glass of water and I almost drank it all while they finished. Then I set up my computer and proceeded to give my talk/workshop!

It was an improved and revised version of the beta-talk I gave at Mozilla London past past week:


Note to self: maybe remove red banners behind me if wearing a red shirt, so as not to blend with them
Continue reading

JSConf.eu 2014

I accidentally ended up attending JSConf.eu 2014–it wasn’t my initial intent, but someone from Mozilla who was going to be at the Hacker Lounge couldn’t make it for personal reasons, and he asked me to join in, so I did!

I hung around the lounge for a while every day, but at times it was so full of people that I just went downstairs and talked hacks & business while having coffee, or simply attended some of the talks instead. The following are notes from the talks I attended and from random conversations on the Hallway and Hacker Lounge tracks ;)

Continue reading