Search code examples
cssscroll

why Scroll behaviour doesn't work when it is applied to the body tag?

I have some sections linked to some a tags.
i tried scroll behaviour : smooth on body : it didn't worrk.
i applied it to HTML : It worked.
So what am i missing ? what is the diference between the two ?

 body {
  scroll-behavior: smooth;
}

section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

the code is here

Solution

  • In documentation from Mozilla about scroll-behavior:

    This property specified on the body element will not propagate to the viewport.

    Full documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

    And more about propagation(last sentence of submitted answer): What's the meaning of "propagated to the viewport" in the CSS spec?