You Probably Don’t Need behavior: smooth in scrollIntoView

Unconditional behavior: smooth use in scrollIntoView or scrollIntoViewIfNeeded is your website’s accessibility failure for people who prefer reduced motion.

Reduce motion setting in macOS

Therefore you probably1 don’t need to…

// ✘
node.scrollIntoView({ behavior: "smooth" })

…because this combination…

// ✔︎
node.scrollIntoView()
html {
  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

…is an accessible way to do smooth scrolling: default behavior’s value is auto means:

auto: scroll behavior is determined by the computed value of scroll-behavior

As a result:

  • no need to run window.matchMedia() for prefers-reduced-motion on every scrollIntoView() call or create a custom wrapper function that does that;
  • single source of truth makes it easier to toggle smooth scrolling when needed, e.g.:
html:is(.disable-smooth-scrolling, :has(.html-disable-smooth-scrolling)) {
  scroll-behavior: auto;
}

1 Generally it is a good default to have, but there might be edge cases where setting behavior is needed to achieve technical goals, and that’s totally fine.

&