我只是偶然发现了htmloverflow: hidden的用法,这在我看来是不合逻辑的:

* {
  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.

这是关于将滚动框从html移动到body,但我不明白为什么这个示例只适用于overflow: hiddenbody的高度已经只有50vh,所以html元素上应该不会发生溢出?

推荐答案

the specification人起:

然而,当根元素是[HTML]html元素(包括用于HTML的XML语法)whose overflow value is visible(在两个轴上),并且该元素具有显示值也不是None的Body元素作为子元素时,用户代理必须改为将第一个这样的子元素的Overflow-*值应用于视区.然后,从中传播值的元素必须具有已使用的溢出值Visible.

html上设置溢出将禁用传播并保留Body元素上的溢出

Html相关问答推荐

关于角内按钮范围的混乱

springBoot + Thymeleaf:基于Locale设置页面语言

我如何 Select 外部html文件元素作为选项,并显示在一个div与jQuery?

如何在angular 17.2中使用routerLink解决此错误

如何修复与导航栏重叠的css网格?

如何在元素的三条边中间换行边框?

Css网格:两列,除非小于150px

Flexbox在元素之间造成了太大的差距

如果最后一行的卡数少于其他行,则在使用flex grow使卡在调整大小时拉伸后,flex卡的宽度将被拉伸

如何使用css在响应图像后面添加形状?

如何使用 Tailwind CSS 分隔导航栏中的元素?

我真的需要一个容器来让行和列正常工作吗? ( bootstrap 程序 v5)

如何使用javascript在jsx中重复插入特殊字符?

在Firefox中使用keySplines时,SVG: <animateMotion>不起作用

如何使用CSS Select 同级元素的::before伪元素?

文本溢出:省略号不适用于 flexbox

不理解 CSS 中的 General sibling combinator (~)

辅助功能:alt 或 alt="" 用于装饰图像

如何使列表的第一个元素比 css 中的其他元素大?

网站页脚中的 Quarto 安装版本