On Scrolling

Published

Filed Under Journal, Links, Notes, The Web

Topics

The team at Evil Martians is notorious for writing some of the best, informative posts this side of the River Hypertext. For example, they wrote an absolutely brilliant, easy-to-parse post on React and how the virtual DOM works. They also penned an opinionated post about front-end Rails solutions.

If you write code (for a living or otherwise), add Martian Chronicles to your feed. They're writing some amazing stuff.

Well, they're at it again. Only this time, they wrote about nothing other than… scrolling on the web. Probably the single most overlooked, ubiquitous and neglected piece of any user experience. So much so that, Apple decided we no longer needed one.

The quiet death of a scrollbar was never mourned by Apple folk. Users, grown accustomed to the way scrolling is done on iPhones and iPads, have quickly embraced the change and most of developers and designers have thought “Good riddance!” Accounting for a scrollbar width had always been a chore.

The Martians researched the topic very thoroughly. I was particularly intrigued with this killer smooth-scroll solution:

<!-- HTML -->
<a href="#section">Section</a>

Clicking that link results in a jump to the section, and often UX designers would insist on some sort of animation to make scrolling smooth. There is a plethora of ready-made solutions on GitHubthat use more or less of JavaScript, but the same can be achieved nowadays with just one line of code. Since recently, Element.scrollIntoView() from the DOM API takes an options object with a behavior key, enabling smooth scrolling out of the box:

// Javascript
elem.scrollIntoView({
  behavior: 'smooth'
});

But the browser support for options is still quite limited and it is still a script. And extra scripts should be avoided whenever possible.Luckily, there is a brand new CSS property (still in working draft) that can change the scroll behavior of the whole page with a single line of code:

/* CSS */
html {
  scroll-behavior: smooth;
}

Way more efficient this way. You can do smooth-scrolling with JS or jQuery all by itself, as noted by this much-frequented CSS-Tricks article. But, I much prefer the lightweight solution Evil Martians cooked up. I should add, that the scroll-behavior CSS property is only supported on Chrome and Firefox as of writing. That being said, there is thankfully a polyfill for unsupported browsers, if you're into that sort of thing.

Anyways, you can check out the rest of the article from Evil Martians on their rad blog here.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.