CSS smooth scrolling

Improving the user experience of web applications has always been my top priority.Even though I’ve been 20 years old, I always go back to the same place: “Users Expected A working web application-let’s make the application interesting. “For many years, we have been using JavaScript to improve the user experience, but over time, these strategies have either become clumsy or integrated into the web language itself. One of such features is smooth scrolling; a good UX improvement, but It will be annoying if it is not perfect. Did you know that you can achieve smooth scrolling with only CSS?

This scroll-behavior CSS properties control the scrolling strategy of overflow elements with scrolling behavior, and only when triggered by navigation or CSSOM properties.default scroll-behavior Value is auto, Which means that there is no visual effect-immediately scroll to the target element without animation.In order to provide users with a smooth scrolling experience, you can use smooth value:

/* slide between items */
.slideshow ul {
  scroll-behavior: smooth;

Of course, when you use the native browser API, you do lose some visual control-most notably animation speed and animation curve. On the positive side, you don’t need to add kilobytes of JavaScript to achieve a very similar effect!

  • Animated 3D flip menu with CSS
  • JavaScript promise API

    Although synchronous code is easier to track and debug, asynchronous is usually better in terms of performance and flexibility. Why “pause the show” when you can trigger a large number of requests at once and then process them when each request is ready? Promises are becoming an important part of the JavaScript world…

  • JavaScript canvas image conversion

    At last week’s Mozilla WebDev Offsite, we all spent half of the last day developing our future Mozilla Marketplace application. One mobile application that has attracted a lot of attention recently is Instagram, which was sold to Facebook at a crazy price of…

  • Use CSS for sexy link conversion

Leave a Reply

Your email address will not be published. Required fields are marked *