Configuring scroll-behavior to respect prefers-reduced-motion

Answer

No. The CSS Scroll Behavior specification does not define how scroll-behavior interacts with the prefers-reduced-motion media feature, so current implementations of scroll-behavior: smooth ignore the reduce setting and always animate.

Confirmed facts

• The spec leaves the interaction undefined, leading to browsers animating smooth scrolls regardless of the user’s motion‑reduction preference.
• A CSS‑only override can suppress the smooth animation when the media query matches.
• Testing can be done purely with CSS by using anchor links (or :target scrolling) and enabling the prefers-reduced-motion emulation in each browser’s developer tools.

Steps to implement

1. Set the default smooth behavior on the scrolling root (typically html or the scroll container):

   html {
     scroll-behavior: smooth;
   }

2. Add a media query that resets the behavior to auto (or initial) when the user requests reduced motion. Place this after the default rule so equal specificity and later source order let it win:

   @media (prefers-reduced-motion: reduce) {
     html {
       scroll-behavior: auto;
     }
   }

3. If you scope the smooth behavior to a specific container, apply the same override to that selector (e.g., .scroll-container).
4. Verify that the override has sufficient specificity; if another rule with higher specificity sets scroll-behavior, increase the selector’s specificity or add !important only as a last resort.

Testing across Chrome, Firefox, and Safari (no JavaScript)

1. Create a simple page with an internal anchor link, e.g., <a href="#section2">Go to section</a> and a target element far enough down to cause scrolling.
2. Open the browser’s developer tools and enable the prefers-reduced-motion emulation:
   • Chrome: Rendering panel → "Emulate CSS media feature prefers-reduced-motion" → set to reduce.
   • Firefox: Settings → More tools → Emulate CSS media feature → prefers-reduced-motion → reduce.
   • Safari: Develop → Show Rendering → Emulate CSS media feature → prefers-reduced-motion → reduce.
3. Click the anchor link and observe the scroll:
   • If the page jumps instantly, the smooth animation is suppressed (expected).
   • If the page still animates, check that the media query override is being applied (inspect the computed scroll-behavior on html).
4. Repeat the test with the emulation disabled (or set to no-preference) to confirm that smooth scrolling works when the user has not requested reduced motion.