背景

当我阅读mdn页时,我注意到左侧和右侧侧边栏的滚动条都包含在自己的内部.但内容区块在全局上下文中有其滚动条.

demonstration

当我判断DOM树时,我看到bodyhtml标记上没有定义Height属性.因此,从本质上讲,它们是在内容区域和最上面的窗口对象之间没有固定高度的元素(可滚动容器). An example of scrollable container

问题

因此,这使得window成为内容区域的溢出容器. 为了进一步确认这一点,我在windowdocument.body的基础上添加了scroll个事件监听器,结果发现只触发了window个事件

window.addEventListener("scroll",(e)=>console.log("window scrolling")) 

document.body.addEventListener("scroll",(e)=>console.log("bodyy scrolling"))

但我希望滚动的上下文不应该是window,而是document.body.而那should fire scroll event from body tag and not window.

我所做的一切

然后,我在body标记中添加了height个属性.

height: 100vh

然后再次向其添加了滚动事件侦听器.但是它没有emits ,我不能理解它为什么没有emits ?

如果父对象的值小于其子对象的值,则向其添加height属性应该会使其可滚动,对吗?

我可能错过了一些基本的东西,但不知道是什么? 请帮帮忙,谢谢!

参考-

推荐答案

确保将<body>上的overflow属性和<html>元素上的overflow属性设置为visible以外的值,因为它是Overflow Viewport Propagation.

要显示滚动条,<body>‘S的高度还必须小于其包含的内容:

window.addEventListener("scroll", () => console.log("window scrolled"));
document.body.addEventListener("scroll", () => console.log("body scrolled"));
html {overflow-y: hidden}
body {
  margin: 0;
  height: 100dvh;
  overflow-y: scroll;
}
main {
  height: 200%;
  background-color: red;
}
<body>
  <main></main>
</body>

Javascript相关问答推荐

如何制作删除按钮以从列表中删除该项目所属的项目?

在卡信息之间切换

如何保持子画布元素的1:1宽高比?

在JavaScript中对大型级联数组进行切片的最有效方法?

未捕获错误:在注销后重定向到/login页面时找不到匹配的路由

在JavaScript中声明自定义内置元素不起作用

Angular:动画不启动

如何禁用附加图标点击的v—自动完成事件

在我的html表单中的用户输入没有被传送到我的google表单中

无法检测卡片重叠状态的问题

保持物品顺序的可变大小物品分配到平衡组的算法

如何在ASP.NET JavaScript中使用Google Charts API仅对绘制为负方向的条形图移动堆叠条形图标签位置

如何使用JS创建一个明暗功能按钮?

如何在JAVASCRIPT中合并两组对象并返回一些键

在Vercel中部署Next.js项目时获取`ReferenceError:未定义文档`

背景动画让网站摇摇欲坠

Clip-Path在网页浏览器(Mozilla、Edge、Chrome)上不能正常工作,但在预览版Visual Code Studio HTML、CSS、JS上却能很好地工作

如何让SVG图标在被点击和访问后改变 colored颜色 ,并在被访问后取消点击时恢复到原来的 colored颜色 ?

Angel Auth Guard-用户只有在未登录时才能访问登录页面,只有在登录时才能访问其他页面

如何在Highlihte.js代码区旁边添加行号?