如何将scroll事件上下文改为document.body而非window？

背景 #

我在阅读MDN文档时注意到，左右侧边栏的滚动条包含在自身内部，但内容区域的滚动条属于全局上下文。查看DOM树后发现，body和html标签都没有定义height属性，内容区域与顶级window对象之间不存在固定高度的可滚动容器。

问题 #

这导致window成为内容区域的溢出容器。我给window和document.body都添加了scroll事件监听器，结果只有window的事件会触发：

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

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

我希望scroll事件的上下文是document.body而非window，也就是触发body标签的scroll事件，而非window的。

尝试操作 #

我给body标签添加了height属性：

height: 100vh

但再次添加scroll事件监听器后，事件仍然没有触发。我无法理解原因——给父元素设置小于子元素高度的height属性，不是应该能让父元素变成可滚动容器吗？

原因与解决方法 #

要让body成为独立的滚动容器并触发自身的scroll事件，只设置height:100vh是不够的，还需要处理浏览器的默认滚动行为和容器规则：

1. 核心规则：一个元素要成为可滚动容器，必须同时满足两个条件：

   • 有明确的固定高度（或最大高度），限制自身的可视范围
   • 设置overflow: auto或overflow: scroll，让超出范围的内容在元素内部滚动

2. 针对body的特殊处理：
   浏览器默认会将视口的滚动行为绑定到window（本质是html元素的滚动），所以需要先禁用html的滚动能力，再让body接管：

   html {
     height: 100%;
     overflow: hidden; /* 禁用html的滚动，避免和body滚动冲突 */
     margin: 0; /* 清除默认边距，防止出现不必要的滚动条 */
   }
   body {
     height: 100vh;
     overflow: auto; /* 开启body的内部滚动 */
     margin: 0; /* 清除默认边距，确保高度准确 */
   }
   

3. 为什么只设置height不生效：
   当你只给body设置height:100vh但没加overflow属性时，浏览器仍然会把超出视口的内容的滚动行为绑定到window，而不是让body自己处理滚动，所以body的scroll事件不会触发。

内容的提问来源于stack exchange，提问作者deepanshu