“Cancelable” Smooth Scrolling

No Comments

Here’s the situation: Your site offers a “scroll back to top” button, and you’ve implemented smooth scrolling. As the page scrolls back to the top, users see something that catches their eye and they want to stop the scrolling, so they do a smidge of a scroll on the mouse wheel,, trackpad, or whatever. That’s what I mean by cancellable. Without any further action, the scroll event goes to the destination. Cancellable means you can stop it with a subsequent scroll. I find the cancellable behavior better UX, although I have no data to back that up.

I’m finding some discrepancies between browsers, as well as between CSS and JavaScript on how this all works.

Scroll down on this demo and give it a shot:

CodePen Embed Fallback

Here’s what I experienced on the browsers I have easy access to:

CSS Smooth ScrollJavaScript Smooth Scroll
ChromeCancellable (Speed: Slowish)Not Cancellable
FirefoxCancellable (Speed: Very Fast!)Cancellable (Speed: Fast!)
SafariNo Smooth ScrollingNo Smooth Scrolling
EdgeCancellable (Speed: Fast)Not Cancellable
iOSNo Smooth ScrollingNo Smooth Scrolling

If it was up to me, I’d:

  • make smooth scroll actions triggered either through CSS or JavaScript cancellable.
  • define “cancellable” because it isn’t really the right word. Maybe “interrupted”? Or “controlled”? Ideas welcome!
  • make the speed controllable, or if not, attempt to get browsers to agree on a medium-ish speed (that stays consistent regardless of scroll distance).
  • make Safari have it. Smooth scrolling makes things like carousels without JavaScript very practical, and that’s great, particularly on mobile where iOS Safari is forced on Apple devices.

The post “Cancelable” Smooth Scrolling appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

    About us and this blog

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment