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

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. Vue3学习笔记

    为什么需要Composition API ? 主要原因:当一个组件的变得逻辑复杂的时候,痛点:多种逻辑代码被分散到组件的各个部分,比如代码的相关逻辑可能会在 data: {...},computed: ...

  2. 遮罩DIV遮挡住下面元素 下面元素如何触发响应点击事件

    遮罩DIV{ pointer-events: none; }

  3. 7. C语言科学计数法表示int

    c语言10的n次方写用e表示: 比如int a=10e2 表示10*10的2次方=1000: 注意:10e6, 代表10*10^6 不代表10^6. 10^6为1^6

  4. JS日期格式化方法 封装

    //--------------------------------------------------- // 日期格式化 // 格式 YYYY/yyyy/YY/yy 表示年份 // MM/M 月份 ...

  5. Python切换中英文输入法

    要实现中英文切换,首先Windows系统必须要有中文语言和英文语言,才能实现输入法(语言)切换. import win32api import win32gui from win32con impor ...

  6. 分布式事务 seata

    seata-server-1.3.0   配置: file.conf: registry.conf: application.yml配置: 配置中心配置文件: 数据库: 使用:

  7. jQuery 获取鼠标点击的元素ID

    $(function(){ $(document).click(function(e) { // 在页面任意位置点击而触发此事件 var v_id = $(e.target).attr('id'); ...

  8. hdfs操作——hdfs的shell命令和hdfs的JavaAPI操作

    hdfs解决hadoop海量数据的存储. shell 命令(所有hadoop fs 可由 hdfs dfs代替) (1) 在hdfs上创建目录 hadoop fs -mkdir 目录名 (2) 本地文 ...

  9. 基于Python的简单读卡上位机界面

    使用到的模块,pyserial  pyqt5  pymysql (我先是实现在命令行下通过串口进行对板子硬件的控制,比如Led ,beep等,在实现检测卡(是否选卡成功),连接卡(验证哪一个扇区),读 ...

  10. Kubernetes--Ingress资源类型

    Ingress资源类型 基于HTTP暴露的每个Service资源均可发布于一个独立的FQDN主机名之上,如 " www.ik8s.io " :也可发布于某主机上的URL路径之上,从 ...