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

See the Pen document.body.onscroll vs document.body.addEventListener('scroll', ...) by y1j2x34 (@y1j2x34)
on CodePen.

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

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 就不会被触发：

See the Pen div.onscroll by y1j2x34 (@y1j2x34)
on CodePen.

奇怪的 document.body.onscroll的更多相关文章

  1. DIV的绝对居中

    来源:http://www.cnblogs.com/damonlan/archive/2012/04/28/2473525.html 作者:浪迹天涯 很多时候,我们需要在浏览器中让一个div居中进行显 ...

  2. 原生js实现吸顶导航和回到顶部特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. js基础--获取浏览器当前页面的滚动条高度的兼容写法

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在开发中,兼容性问题是最常见的,今天就来介绍一下关于获取滚动条高度的兼容性写法,宽度同理,我在这里就不一一解释了 各浏览器 ...

  4. js 弹窗的实现

    原理: 1. 点击按钮,触发窗口显示,遮罩层显示,并设置窗口的位置 2. 为弹出的窗口绑定鼠标滚动事件和视窗改变事件 3.点击关闭按钮,弹窗消失,遮罩层消失 html 代码: <!DOCTYPE ...

  5. onsrcoll和scrollTop兼容与实现

    对于onscroll事件的支持 各浏览器 document.document.body.document.documentElement 对象的 onscroll 事件的支持存在差异. 所谓的支持性存 ...

  6. 滚动时sticky nav

    参考w3c <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <met ...

  7. [document.cookie]为什么cookie不在window下的呢.奇怪了[未完待续]

    什么是cookie,怎么就叫cookis,它能干嘛 我猜吧,就是登录页面的时候传值,二次登录的时候可以给你说句'hello xxx'; 下面这堆比较啰嗦,随意看吧 //cookie 用户储存在用户本地 ...

  8. 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

    一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.on ...

  9. document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

    转自http://wo13145219.iteye.com/blog/2001598 一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取do ...

  10. webView 自适应高度 document.body 属性

    前段时间开发遇到webView 高度自适应问题,用最初的方法无效,找了些资料,记录下. 1.若网页中含有< !DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...

随机推荐

  1. HDLbits——Exams/2014 q4b

    题目要求 使用verilog描述如图所示得移位寄存器: Write a top-level Verilog module (named top_module) for the shift regist ...

  2. 理解cpu过高的逻辑思维与分析方法

    工作经常碰到负载过高,cpu占有太高,系统变慢,运维通常做的第一件事就是通过top或者uptime命令来了解系统负载的情况 通常uptime后会出现三个小数,就是平均负载值,那真正的了解这个平均负载值 ...

  3. Python中变量和对象的关系

    变量和对象 Python中一切皆为对象,数字是对象,列表是对象,函数也是对象,任何东西都是对象.而变量是对象的一个引用(也可以称为标签或者名字),对象的操作都是通过引用来完成的. 例如,[]是一个空列 ...

  4. Oracle 临时表空间暴满的原因与解决方法

    Oracle临时表空间主要用来做查询和存放一些缓冲区数据.临时表空间消耗的主要原因是需要对查询的中间结果进行排序. 重启数据库可以释放临时表空间,如果不能重启实例,而一直保持问题sql语句的执行,te ...

  5. android隐藏apk方式以及apk之间的启动方式

    一.隐藏apk的方式: 在每个项目(apk)中都有一个启动应用的Activity,他的标签是这个: <intent-filter> <action android:name=&quo ...

  6. c#在代码中再次调用按钮点击事件

    在一个按钮事件中调用另一个按钮(button1)的点击事件,可以直接如下: button1.PerformClick() 也称之为 以编程方式调用按钮的click事件

  7. 移动端唤起QQ聊天

    var u = navigator.userAgent; var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if(isiOS){ if(u ...

  8. taro， h5拨打电话和发送短信

    1. h5的实现方式 首先加个允许meta <meta name="format-detection" content="telephone=yes"/& ...

  9. 使用vite创建vue3+ts项目完整流程

    1.创建项目 npm init vite@latest 依次输入项目名称.选择vue.选择ts 2.引入依赖 cd 项目名称 npm install 3.启动项目 npm run dev 4.引入vu ...

  10. 计算机网络复习小结（3）-IPv4

    IPv4分组 一个IP分组由首部和数据两部分组成,首部前一部分的长度固定,共20B,是所有IP分组必须具有的.在IP数据报首部中有三个关于长度的标记,一个是首部长度,一个是总长度,一个是片偏移,基本单 ...