CSS Smooth Scroll

By  on  

Improving the user experience of web applications has always been a priority of mine. I always come back to the same though I've had for 20 years: "users expect a web app to work -- let's make the app a joy to use." Over the years we've employed JavaScript to improve the UX, but over time those strategies either become clunky or get baked into the web languages themselves. One such feature is smooth scrolling; a great UX improvement but annoying if imperfect. Did you know that you can implement smooth scrolling with just CSS?

The scroll-behavior CSS property controls the scrolling strategy for overflow elements with scrolling behavior, and only when triggered by navigation or CSSOM properties. The default scroll-behavior value is auto, which represents no visual effect -- immediately scrolling to the target element with no animation. To provide users a smooth scrolling experience, you can use the smooth value:

/* slide between items */
.slideshow ul {
  scroll-behavior: smooth;
}

Of course you do lose some visual control when you use a native browser API -- most notably animation speed and animation curve. On the positive side you don't need to add kilobytes of JavaScript that you need to maintain to achieve a very similar effect!

Recent Features

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

Incredible Demos

  • By
    Create a Clearable TextBox with the Dojo Toolkit

    Usability is a key feature when creating user interfaces;  it's all in the details.  I was recently using my iPhone and it dawned on my how awesome the "x" icon is in its input elements.  No holding the delete key down.  No pressing it a...

  • By
    Create a Simple Dojo Accordion

    Let's be honest:  even though we all giggle about how cheap of a thrill JavaScript accordions have become on the web, they remain an effective, useful widget.  Lots of content, small amount of space.  Dojo's Dijit library provides an incredibly simply method by which you can...

Discussion

  1. Nice post! I might also suggest incorporating the prefers-reduced-motion media query to negate smooth scroll effects when the user has indicated a preference for a low-motion experience.

    Larger animated transitions such as full-page scrolling or slideshow motion have been known to be vestibular triggers. Just a touch more CSS and you’re doing a lot to help your users out!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!