I just stumbled across this use of overflow: hidden on html which doesn't seem logical to me:

* {
  all: unset;
  display: revert;
}
html {
  height: 100vh;
  overflow: hidden;
  background: black;
}
body {
  height: 50vh;
  font-size: 5rem;
  background: white;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  overflow-y: scroll;
}

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

It's about moving the scroll box from html to body, but I don't understand why this example only works with overflow: hidden? The body is already only 50vh in height, so there should no overflow occur on the html element?

CodePudding user response：

From the specification:

However, when the root element is an [HTML] html element (including XML syntax for HTML) whose overflow value is visible (in both axes), and that element has as a child a body element whose display value is also not none, user agents must instead apply the overflow-* values of the first such child element to the viewport. The element from which the value is propagated must then have a used overflow value of visible.

Setting overflow on the html will disable the propagation and keep the overflow on the body element