CSS Smooth Scroll

Enhancing the person expertise of internet functions has all the time been a precedence of mine. I all the time come again to the identical although I’ve had for 20 years: “customers anticipate an internet app to work — let’s make the app a pleasure to make use of.” Through the years we have employed JavaScript to enhance the UX, however over time these methods both turn into clunky or get baked into the online languages themselves. One such characteristic is easy scrolling; a terrific UX enchancment however annoying if imperfect. Do you know which you could implement easy scrolling with simply CSS?

The scroll-behavior CSS property controls the scrolling technique for overflow parts with scrolling habits, and solely when triggered by navigation or CSSOM properties. The default scroll-behavior worth is auto, which represents no visible impact — instantly scrolling to the goal factor with no animation. To offer customers a easy scrolling expertise, you need to use the easy worth:

/* slide between objects */
.slideshow ul {
  scroll-behavior: easy;
}

After all you do lose some visible management whenever you use a local browser API — most notably animation pace and animation curve. On the optimistic facet you needn’t add kilobytes of JavaScript that it’s good to preserve to attain a really comparable impact!