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

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. UGUI UI拖拽，UI连线。

    1.拖拽 public class Item : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler { public Re ...

  2. redis常用命令之Hash

    redis常用命令之Hash Hash常用命令 redis 可以理解为一个全局的大字典,key就是数据的唯一标识符.对应的key不同,value也不同.redis有5个基本的数据类型. 1 redis ...

  3. window.open在打开pdf时直接下载而不是查看

    一般这是url请求的原因导致的, 可以考虑这种写法 window.open(link+'?response-content-type=application/pdf') 加上后面这段可以转为查看

  4. 【Nday】Spring-Cloud-SpEL-表达式注入漏洞复现

    # 环境搭建 JDK 15下载:   https://www.oracle.com/java/technologies/javase/jdk15-archive-downloads.html 在Cen ...

  5. HCIP-ICT实战进阶03-OSPF高级特性

    HCIP-ICT实战进阶03-OSPF高级特性 1 ospf的快速收敛 ospf快速收敛是为了提高路由的手来你熟读而做的扩展特性, 包括PRC(Partial Route Calculation, 部 ...

  6. QT窗口显示的风格设置

    在main.cpp中添加头文件#include <QStyleFactory> 然后在QApplication a(argc, argv);后添加 a.setStyle(QStyleFac ...

  7. TypeScript系列 -> 遇到报错 Cannot find name ‘console‘. Do you need to change your target library?ging the ‘lib‘ compiler option

    学习ts遇到的报错 Cannot find name 'console'. Do you need to change your target library?ging the 'lib' compi ...

  8. xshell和xftp绿色版下载

    下载地址:https://www.xshell.com/zh/free-for-home-school/ 点击后页面如下,输入自己的姓名和邮箱然后点击下载即可.登录自己的邮箱获取下载链接.

  9. 基于CFSSL工具创建CA证书

    背景描述 CA(Certification Authority)证书,指的是权威机构给我们颁发的证书. 在局域网中部署组件时,想要通过证书来实现身份的认证,确保通信的安全性,可以通过cfssl工具来进 ...

  10. 新手IC617安装NCSU pdk

    新手IC617安装NCSU cdk 以CMOSedu网站为参考:https://cmosedu.com/videos/cadence/tutorial1/cadence_tutorial_1.htm ...