Cancelable Smooth Scrolling: A Browser Consistency Problem
Imagine a "back to top" button with smooth scrolling enabled. A user clicks it, the page starts gliding upward, and mid-scroll they spot something interesting. They nudge the mouse wheel or trackpad to halt the motion—only to find the scroll event continues on to its original destination. That interruption is what we call "cancelable" scrolling, and it's arguably the better user experience, even if no hard data confirms it.
The catch: browsers disagree on how this behaves, both between CSS and JavaScript implementations and across different engines. Below is a quick breakdown of what happens in practice:
| CSS Smooth Scroll | JavaScript Smooth Scroll | |
|---|---|---|
| Chrome | Cancellable (Speed: Slowish) | Not Cancellable |
| Firefox | Cancellable (Speed: Very Fast!) | Cancellable (Speed: Fast!) |
| Safari | No Smooth Scrolling | No Smooth Scrolling |
| Edge | Cancellable (Speed: Fast) | Not Cancellable |
| iOS | No Smooth Scrolling | No Smooth Scrolling |
Browser behavior is far from standardized. In an ideal world, smooth scroll actions triggered by either CSS or JavaScript would always be interruptible, and the speed would be controllable or at least consistent across distances. More fundamentally, "cancelable" isn't quite the right term—maybe "interrupted" or "controlled" fits better.
Safari's lack of support is especially notable since smooth scrolling makes CSS-only carousels practical, particularly on iOS where Safari is the only option.
