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

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. react backend and frontend download file

    import {  View as ViewFile} from '@/api/SafetyRule'; const Handler_DownLoadFile = (Id:number,IsEngli ...

  2. JAVASCRIPT 对有符号整型、无符号整型、浮点型、十六进制、二进制的数据处理

    1.十六进制字符串转有符号整型,支持S8.S16.S32: function hexToInt(hex) { if(hex.length % 2 != 0) { hex = "0" ...

  3. laravel 邮件发送

    1.首先你要在qq悠闲中开启你的   SMPT(设置->账户)   获取到你的授权码 2.配置laravel MAIL_DRIVER=smtpMAIL_HOST=smtp.qq.comMAIL_ ...

  4. ORACLE 数据库备份脚本（数据泵2-指定用户）

    #!/bin/bash export NLS_LANG=AMERICAN_AMERICA.ZHS16GBK #定义字符集RQ=`date +20%y-%m-%d` #创建数据泵目录directory, ...

  5. Linux 服务器配置。

    关于防火墙 1.首先不管防火墙有没有关 都使用systemctl stop firewalld 关闭防火墙 2.然后使用 yum install iptables-services 安装或更新服务 3 ...

  6. redis 数据库在linux下的安装配置与使用

    linux安装redis 完整步骤(1)安装: 1.获取redis资源 wget http://download.redis.io/releases/redis-4.0.8.tar.gz 2.解压 t ...

  7. AIO基本编写

    一. public class Server { //线程池 private ExecutorService executorService; //线程组 private AsynchronousCh ...

  8. PowerDesigner 从数据库生成实体模型关键步骤

  9. 【Operating System】——An interesting question on Process Creation

    In the book Operating System Concepts- 9th Edition - Chapter 3 - Page 117 - Page 120 it says: How do ...

  10. python:包含’e’和‘-’的 str 转 float

    from functools import reduce def str2float(s): s = s.split('.') a = s[0] b = s[1] if a[0] == '-': a ...