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

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. hdrp package导入工程

    补充: 可以直接把包提出来放一个单独文件夹 然后在package manager中load from disk,跟下面手动改效果没区别 如果发现有各种引用丢失,在工程内对包reimport下 1 需要 ...

  2. python实现自动打卡

    自己也百度了一下,然后写的,分为了三个部分,见三段代码 代码:主程序代码 import timefrom selenium import webdriverfrom private_info impo ...

  3. Onur Mutlu 18-447 Lecture9 分支预测-1

    =============== 第一部分:branch prediction =========== 1. 最简单的分支预测:总是预测下一条指令的地址在 PC+4 如何让这种分支预测更加有效呢? Id ...

  4. JS数组的交集与差集

    有两个数组arr1,arr2 实现arr2中去除arr1相同的元素 e.g arr1=[1,2,3] arr2=[2,3,4] ===> result = [4] 实现 获取两个数组(arr1, ...

  5. jmeter的阶梯式加压性能测试 jp@gc - Stepping Thread Group (deprecated)

    当测试需求要求是阶梯型的压力测试场景时,使用该线程组. 比如测试场景是    从100并发开始,每60s加压50并发,直至达到目的并发数(中途发现问题随时停掉),之后保持每60s停止50并发的速率关闭 ...

  6. 学习canvas的vscode提示问题

    在代码中加入/** @type {HTMLCanvasElement} */ 即可 1 <script> 2 /** @type {HTMLCanvasElement} */ 3 let ...

  7. 2022-3-28内部群每日三题-清辉PMP

    1.由于一直重复执行相同的任务,一个敏捷团队的士气低落.敏捷管理专业人士(主题专家 SME)应采取哪一项行动? A.增加团队的资源数量,协助主题专家完成任务. B.让团队成员执行其活动的价值流分析. ...

  8. ping 请求找不到主机 www.baidu.com

    1.以管理员方式运行cmd 2.输入netsh winsock reset 3.重启电脑 4.如果还是不行,就删除C:\Windows\System32\drivers\etc里面的hosts文件试试 ...

  9. fail-fast简介

    转载请注明出处:http://www.cnblogs.com/skywang12345/p/3308762.html fail-fast简介(使用concurrentHashMap可以完美避免这个问题 ...

  10. spider_使用随机User-Agent库， 爬取笔趣阁万古天帝章节目录_(fake_useragent)

    """使用随机User-Agent库,爬取笔趣阁万古天帝章节目录"""import requestsfrom fake_useragent ...