1

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

Abdoun abdou
  • 41
  • 1
  • 6
  • 2
    That is because the `` element is the default scrolling element, unless otherwise specified. – Terry Dec 27 '21 at 10:52
  • @Terry , is it the case for scroll-snap ?, I faced the same problem, it works with html not with body, – Abdoun abdou Dec 27 '21 at 11:10
  • Yes since it’s also a scroll-related property. It only works on scrolling elements. – Terry Dec 27 '21 at 11:54
  • So that means if i wanted to apply this properties on body (or other element) I need to add overflow : scroll . – Abdoun abdou Dec 27 '21 at 12:42
  • 1
    No. The html element will scroll by default when it overflows. But for other elements yes, you will need something like `overflow-y: auto` (don’t use `scroll` because that’ll force a scrollbar even when content is not overflowing) – Terry Dec 27 '21 at 13:20

1 Answers1

1

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?

M-Zoldak
  • 46
  • 6