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

Incredible Demos

  • 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...

  • By
    Spoiler Prevention with CSS Filters

    No one likes a spoiler.  Whether it be an image from an upcoming film or the result of a football match you DVR'd, sometimes you just don't want to know.  As a possible provider of spoiler content, some sites may choose to warn users ahead...

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!