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

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. useCallback与useMemo使用场景

    疑问:为什么需要useCallback和useMemo 答: 父组件变化,会引起子组件的 re-render,为了阻止子组件不必要的 re-render,需要满足两个条件: 1.子组件用 react. ...

  2. 像MIUI一样做Zabbix二次开发（6）——应用场景和规划

    其他使用场景 监控做为一个重要的管理手段,存在很多的使用场景,简单列举我们现在碰到的: 1.     系统集成 事件管理流程集成:配置管理集成,自动CI获取,提高CMDB准确.实时性:知识库集成,提高 ...

  3. fftw安装

    1. 下载fftw 2.tar -zxvf fftw.tar.gz 3. ./configure --prefix=path --enable-sse2 --enable-avx --enable-f ...

  4. redis使用示例

    package com.atguigu.gulimall.product;import com.alibaba.fastjson.JSON;import com.alibaba.fastjson.Ty ...

  5. （读书笔记）基于CMMI的软件工程及实训指导------第一章软件工程基础

    第一章------软件工程基础 1.软件工程基本原理 (1)按照软件生命周期的阶段划分制订计划,严格依据计划进行管理 (2)坚持进行阶段评审 (3)实行严格的产品控制 (4)采用现代程序设计技术 (5 ...

  6. 哈希表相关题目-python

    栈&队列&哈希表&堆-python  https://blog.csdn.net/qq_19446965/article/details/102982047 1.O(1)时间插 ...

  7. antVue--a-cascader级联组件使用触发loadData方法注意事项

    <template> <a-cascader :options="options" :load-data="loadData" placeho ...

  8. element-ui casader组件动态加载的回显问题

    最近在做项目的时候用到了element-ui的cascader来做省市区的级联显示 我要做的需求就是在选择某个省的时候,再去加载省下面的所有市,在实现这个需求的过程中遇到了二级菜单不能反显的情况.以下 ...

  9. 6. Python 模块

    模块其实就是一个python文件 python导入模块的顺序 1. 从当前目录下找需要导入的python文件 2. 从python的环境变量中找 sys.path 当前目录和sys.path中都有im ...

  10. 开发Unity3D空战类插件 战机HUD系统

    Fighter HUD System 当您使用Unity3D来开发飞行模拟或者空战类游戏时,这款Fighter HUD Sytem插件将会非常的适合用来充当您战机的HUD系统. 特点 此HUD系统的安 ...