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
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

Incredible Demos

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!