Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
@zachleat

This comment has been minimized.

Copy link
Owner Author

@zachleat zachleat commented Aug 18, 2020

Found via @netlify repo for https://jamstackconf.com/

@adamculpepper

This comment has been minimized.

Copy link

@adamculpepper adamculpepper commented Aug 20, 2020

Thanks for sharing @zachleat!
I made a quick example of this because I was in disbelief that "smooth scrolling" could be done in pure css.
demo: https://jsfiddle.net/adamculpepper/onu57cpj/5

@zachleat

This comment has been minimized.

Copy link
Owner Author

@zachleat zachleat commented Aug 21, 2020

Per some of the comments on the Tweet https://twitter.com/zachleat/status/1295737380738146304 I’ve switched to using:

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

via https://twitter.com/g16n/status/1296799212445880321 and https://twitter.com/ericwbailey/status/1295741897483464705

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.