After reading the discussion about scroll behaviour I decided to add a user setting to my website so that smooth scrolling can be disabled even when the user has no preference towards reduced motion:
@media (prefers-reduced-motion: no-preference) {
:where(html:focus-within:has([name="smooth-scroll"]:checked)) {
scroll-behavior: smooth;
}
}
This allows folks who don’t have reduced motion turned on as an operating system setting to disable smooth scrolling if they choose. The :focus-within portion of the selector means the page will not smooth scroll if they navigate to a page that has a fragment identifier in it, e.g. https://chrisburnell.com/#projects
I’ve also hidden the setting when the user does have reduced motion enabled because the checkbox will have no effect.
@media (prefers-reduced-motion: reduce) {
fieldset:has([name="smooth-scroll"]) {
display: none;
}
}