scroll-behavior is the CSS property that controls how the viewport changes when a visitor presses a link that sends them to a specific section of the same page.
auto is the default. the visitor is instantly teleported to the target section.
smooth makes all of the parts of the page between the starting point and the destination scroll by.
navigation within a page is achieved through something like <a href="#example"> to send someone to <section id="example">
note: i am not talking about the parallax effect, which is where the foreground and background scroll at different speeds to give the illusion of being 3D.
which do you prefer?
sometimes, i really like smooth scroll. it gives me a sense of how far down the page i’m travelling, and it adds a certain… “wheeeee ” factor to the page. my favorite use of smooth scroll is on olia lialina’s homepage. despite this, there are some contexts where i feel annoyed or even mildly dizzied by smooth scroll.
i can’t decide which to use on my site, so i’ve decided to poll the community! i’ll let the data be my guide here. what’s your preference for scroll-behavior?
strongly prefer auto scroll
prefer auto scroll
no preference
prefer smooth scroll
strongly prefer smooth scroll
0voters
context (probably) matters! so here are some more specific follow-up polls:
smooth is better for small sections / worse for the whole page
no preference
smooth is better for the whole page / worse for small sections
0voters
smooth is better for long pages / worse for short pages
no preference
smooth is better for short pages / worse for long pages
0voters
feel free to elaborate in the replies, and please let me know if there’s some other variable that affects your experience with scroll-behavior: smooth. thank you for the data!
I like auto — it’s not always obvious if a link goes to somewhere on the current page or a new one, so consistent behavior is nice. Experiencing an animation when I don’t expect it is jarring for me, and even if I do expect it smooth scroll can be dizzying.
I imagine someone out there has used prefers-reduced-motion to try to customize the scroll behavior, but since I don’t like the OS animations becoming abrupt on my phone, I never turn that on. (Why abruptness doesn’t bother me on websites but does when switching app, I don’t really know…)
But honestly, if I’m visiting your website and you like smooth best, maybe that’s a context where smooth makes the most sense. Heck, maybe you’ll be the one to change my mind
I feel like smooth scroll just wastes peoples’ time. The animation is nice the first time you see it but loses its allure any time after that. Just take me to what I clicked on!
Yeah I agree with @cheedle , I think the speed of it really matters, but maybe that’s my awful attention span showing lol. If it’s a slow scroll down an entire page I will be pretty upset, but if it scrolls quickly I totally get the 'wheeee ’ factor.
Excessive smoothing for things that should be direct and in my control with as little input delay as possible, makes me feel ill. Whenever I play a game with Vsync, or go to a site that overwrites the default scrolling behaviour, or a site which makes vertical scrolling do things horizontally or ignores scrolls except at intervals… it all contributes to making me feel ill. Whenever I encounter a site like this, I have to brace myself mentally because of how terrible it makes me feel.
This is coming from someone who can handle fast paced FPS games and VR games without any sickness issues. There’s 2 parallel lines of motion sickness. There’s motion sickness because you’re not used to the environment, and then there’s motion sickness because the environment introduces lag and delay to the response. this is like being flipped upside down, except the cochlear(the part responsible for telling you about gravity and balance) was delayed by the designer. The environment part, there isn’t a lot you can do about it as computers are basically a tank of sensory deprivation(no touch, often no sound, no balance, no smell etc), which means when you violate the senses it really feels bad and frustrating.
MDN has a really good overview of prefers-reduced-motion. Basically it’s a media query which can be used by designers to reduce or turn off animations when users have a system setting turned on. The link describes where to find the setting on a lot of different operating systems.
As to whether it’s respected widely… Unfortunately I don’t know since I only turn on the setting occasionally. It requires the people making the site to include it, so my guess is that it varies (like a lot of accessibility ). But it wouldn’t hurt to try it, since it could help when websites do respect it.
” factor to the page. my favorite use of smooth scroll is on olia lialina’s homepage. despite this, there are some contexts where i feel annoyed or even mildly dizzied by smooth scroll.
: 
). But it wouldn’t hurt to try it, since it could help when websites do respect it.