打开开发者工具, 滚动下面示例页面

可以看到,控制台输出如下内容:

Chrome:

Firefox:

我们滚动的内容实际上是<html>标签,按道理应该只有通过 document.documentElement 监听的滚动事件会被触发,但是通过 document.body.onscroll 能监听到滚动事件,而 addEventlistener('scroll', fn) 兼听不到。
查过一些资料说这可能为了兼容非常旧网站而保留下来的功能,参考这个回答: https://stackoverflow.com/questions/67940593/why-does-body-onfocus-trigger-but-not-body-addeventlistenerfocus#answer-67940594

如果使用 div 模拟上面的实例,滚动.scrollable 时, .box.onscroll 就不会被触发:

posted on 2022-06-14 10:39  y1j2x34  阅读(134)  评论(0编辑  收藏  举报