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
    5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

  • 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
    MooTools Documentation Search Favelet

    I'm going to share something with you that will blow your mind: I don't have the MooTools documentation memorized. I just don't. I visit the MooTools docs frequently to figure out the order of parameters of More classes and how best to use...

  • By
    Select Dropdowns, MooTools, and CSS Print

    I know I've harped on this over and over again but it's important to enhance pages for print. You can do some things using simple CSS but today's post features MooTools and jQuery. We'll be taking the options of a SELECT element and generating...

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!