If you need smooth scroll you can't rely on browser support and need to use a library or cook something up yourself. It's surprising how few browsers work with smooth scroll. Today it's basically only Firefox; not even Chrome.
Not to be a fanboy but I use a Mac and one of the things that they clearly did a huge amount of research and fine tuning on is the scrolling. I can always tell when there's non native scrolling on a site and it always sucks. Maybe I'm out of touch, but IMO the smoothness of the scrolling is an OS or hardware level feature. If somebody's OS or hardware does not scroll smoothly, then clearly it's something that they're used to from every other site they visit.
Putting a "smooth scrolling" library in makes about as much sense as rendering all of your site's text on canvas because some computers have font aliasing issues. It reeks of a micromanaging CEO getting fixated on some arbitrary requirement that makes stuff look better only on his computer.
I'm not talking about manually implementing a virtual scrollable canvas. I'm talking about "make item 19 in that list box visible in the middle of It's display area."
I agree that scrolling virtual spaces should be native and hardware accelerated whenever possible, but I think we are talking about different use cases.
Imagine there's a scrollable list of items and you want to scroll one particular item into view when some event happens. Without smooth scroll the item just pops into view and the user may not see it happening. It's a usability issue-- when the user interface jerks instantly, the user can lose context about what's happening. When it's smoothly animated it's easier for the user to keep track of what's happening in the user interface, and to see how one interaction triggers the next.
Done right, animation isn't just snazzy, it produces a more usable, more approachable user interface. It helps the user keep a good mental model of what's going on. It's easier for them to mentally track "ah, when I select this item, it also selects that other item in the other list".
It's the same reason why when you click an app on your phone it animates up from the app icon when the window opens. The animation wordlessly tells the user "I'm opening this app, and the window that's appearing is born of the icon you just clicked." Necessary? Not exactly. More natural? Absolutely. Nothing just snaps into existence in the real world, except for maybe things like lightning.
When things appear out of nowhere it can be jarring. Animation is especially called for when it might not be intuitive why you're making a change to the visual state, or when you want to call attention to something.
Keep in mind that a generation ago, pretty much every piece of software (even games!) came with a printed manual that the user needed to read first before expecting to be able to accomplish anything. Today users expect to be able to figure things out for themselves, and animation is part of the user experience that helps users learn their applications naturally by exploring the user interface.
Exactly, and just we wait for mainstream VR/AR. I believe we'll see quite a lot of animation skeumorphism (is that a thing? I mean realistic animation/appearance relatively to a real world setting, e.g. gravity on objects, diffraction on transparency, etc). For a few years at least, time for users to learn new interaction paradigms and positioning within a virtual/hybrid environment.
This is what I use right now for cross-browser smooth scrolling. It's native first with a jQuery fallback.
<style>
html, body {
scroll-behavior: smooth;
}
</style>
<script>
// Uses native smooth scrolling if available, otherwise uses a jQuery fallback
// Just add data-scroll attribute to any anchor you want to make smooth
// Add data-scroll-header to a sticky nav / header to offset the window top
if (!('scrollBehavior' in document.documentElement.style)) {
// jQuery fallback
// Taken from https://css-tricks.com/snippets/jquery/smooth-scrolling/
$('[data-scroll]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top - $('[data-scroll-header]').height()
}, 600);
return false;
}
}
});
}
</script>
