Tag Archives: css

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.

On CSSConf + JSConf 2014

TL;WR*: a mostly social event, great for meeting the authors of those modules you see scroll past when you run npm install and it installs half of the internet. Also, lots of presentations on somewhat hipster stuff which I not always understood, but that’s great–I like not understanding it all from the get go, so I can learn something. And some discussion about physical and mental health and better community building and other important non purely technical stuff that usually never gets the chance to be discussed in tech conferences.
Continue reading

“Mozilla’s new technologies” (for Mozilla Power’13)

I was going to “manifest” myself in Cairo via the powers of videoconferencing for Mozilla Power’13, but connectivity issues happened, so I recorded a screencast with my talk:

Slides

Here’s hoping the Mozilla Egypt community is having a great event :-)

Do send me any questions you might have about the topics I discussed, and I’ll do my best to answer them!

“Sorry, technical discussion”

It happened to me several times while at OFFF past week: I was in a conversation with people whom I had just met moments before and the conversation derived into “technical” matters, which is to say mild-core development topics like CSS or HTML5. And then someone looked at me with a mix of pity and embarrassment and excused himself and the others, shoulder-shrugging while muttering Sorry, technical discussion. Like if I couldn’t follow the thread and all that.

It was kind of amusing –because I could indeed follow it–, but it’s also very sad to assume that only because I’m female I can’t follow a “technical” discussion.

It’s also funny that “technical” means “traditionally male-dominated topics”, such as software development. But that is absurd: as any sane person will agree, if you want to excel at a field you have to master the technique, whatever your genre is.

Thus, CSS are as technical as knitting, which is a traditional female-only field, but yet you don’t get to look at the only male caught by accident in the middle of a knitting discussion by passionate female knitters and tell him Sorry, technical discussion. No, it’s more like: Oh dear, women’s things! *giggles*.

I say, stop perpetuating the stereotypes. Keep on talking about your preferred subjects and let your audience decide whether it’s too technical for them or not. But don’t make erroneous judgements, please :-)