There was this interesting Twitter conversation last week between Chris Coyier and Schepp last week. Apparently if you have Smooth Scrolling enabled, it also affects the behavior of Find in Page in Chrome: Whenever you want to go to the next result it will smooth scroll, instead of jump to it.
Anecdotal thing: when I had this on @CSS, I had SO MANY reports of people annoyed that when they did "find on page" and ⬆️⬇️ through the results, the smooth scrolling was slow and annoying. Unfortunately, you can't control the speed or when it happens. https://t.co/HAio46bYQt
— Chris Coyier (@chriscoyier) January 5, 2021
Schepp chimed in and offered the solution: leverage the :focus-within pseudo-class selector so that it’s only applied when the html has focus.
You could try fix it with
html:focus-within {
scroll-behavior: smooth;
}— Christian Schaefer (@derSchepp) January 5, 2021
Combine it with prefers-reduced-motion and you’ll end up with this:
@media(prefers-reduced-motion: no-preference) {
html:focus-within {
scroll-behavior: smooth;
}
}There’s on nasty side-effect though: in-page jump links that refer to the id of an element will no longer work. You’ll actually need to sprinkle some <a name="…">#</a> elements over your markup to make those work smoothly …
Fixing Smooth Scrolling & Page Search →
Chromium Bug #866694 →
there’s one, simple solution: just don’t
slow scrolling is terrible experience, it’s one of blocking animations that only achieve one thing: wasting time
That’s also an option indeed 😅