Software

CSS Smooth Scroll


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!

  • From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!
  • Regular Expressions for the Rest of Us

    Sooner or later you’ll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In…

  • Advanced CSS Printing – Using JavaScript Double-Click To Remove Unwanted DIVs
  • Adding Events to Adding Events in MooTools

    Note: This post has been updated. One of my huge web peeves is when an element has click events attached to it but the element doesn’t sport the “pointer” cursor. I mean how the hell is the user supposed to know they can/should click on…



Source link
Show More

admin

Makes Noise is a blog where you can find all the juicy details on a variety of topics including health and fitness, technology, lifestyle, entertainment, love and relationships, beauty and makeup, sports and so much more. The blog is updated regularly to make sure you have all the latest and greatest information on the topics that matter most to you.

Related Articles

Leave a Reply

Your email address will not be published.

Back to top button