iframe或document监听滚动事件不起作用
有时候我们会遇到监听iframe或document的滚动事件不起作用的情况，在排除代码写错的情况下，我们应该考虑此时的document是否可以滑动。
1、为什么document不能监听滑动?
就很奇怪，明明页面时有滚动条的，为什么说document不可滑动呢？
因为有的document.scrollingElement本身就不可滑动，可滑动的是它的子元素，而不document.scrollingElement本身，document.scrollingElement本身没有溢出问题，它的子元素有溢出问题并产生的scrollbar
展示document不能滚动的DEMO：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>document不能滑动，滑动的是它的子元素</title><style>html,body {padding: 0;margin: 0;}</style></head><body><div style="width: 100%;height: 100vh;overflow: auto;"><h1>这是1号标题</h1><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><h2>这是2号标题</h2><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><h3>这是3号标题</h3><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><h4>这是4号标题</h4><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><h5>这是5号标题</h5><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><h6>这是6号标题</h6><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p></div></body><script>window.onload = function() {document.onscroll = function() {//获取滚动条的位置var scrollTop =document.documentElement.scrollTop ||document.body.scrollTop;console.log("滚动条的位置：", scrollTop);};};</script></html>
2、什么是document.scrollingElement
scrollingElement（Document 的只读属性）返回滚动文档的 Element 对象的引用。在标准模式下，这是文档的根元素， document.documentElement。
当在怪异模式下，scrollingElement 属性返回 HTML body 元素（若不存在返回 null）。
3、为什么要有document.scrollingElement？
众所周知，获取浏览器高度是有兼容的，当我们需要设置滚动条的位置时，一般情况下：
document.documentElement.scrollTop = 100; // PC端
document.body.scrollTop = 100; // 移动端
当有了document.scrollingElement后我们就不需要处理兼容问题了，两端通用
document.scrollingElement = 100; // 两端通用
4、用js代码测试元素是否可滑动
// 判断是否可滑动
function isScrollable(ele) {const hasScrollableContent = ele.scrollHeight > ele.clientHeight;const overflowYStyle = window.getComputedStyle(ele).overflowY;const isOverflowHidden = overflowYStyle.indexOf('hidden') !== -1;return hasScrollableContent && !isOverflowHidden;
}5、监听iframe的滚动案例
5.1 document可滑动
demo.html
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>iframe或document监听滚动事件</title></head><body><iframe id="myframeId" src="./iframe.html" width="90%" height="200px"><p>你的浏览器不支持iframes。</p></iframe></body><script>// 判断是否可滑动function isScrollable(ele) {const hasScrollableContent = ele.scrollHeight > ele.clientHeight;const overflowYStyle = window.getComputedStyle(ele).overflowY;const isOverflowHidden = overflowYStyle.indexOf('hidden') !== -1;return hasScrollableContent && !isOverflowHidden;}window.onload = function() {let result = isScrollable(document.scrollingElement);console.log("demo是否可滑动：", result)var frameWidow = document.getElementById("myframeId").contentWindow;console.log(frameWidow);// 两端通用// frameWidow.document.scrollingElement.scrollTop = 100// 适用PC端// frameWidow.document.documentElement.scrollTop = 200// 适用移动端// frameWidow.document.body.scrollTop = 300// scrollTo()方法frameWidow.scrollTo(0, 400)//监听frameWidow.onscroll = function() {//获取滚动条的位置var scrollTop =frameWidow.document.documentElement.scrollTop ||frameWidow.document.body.scrollTop;console.log("frame滚动条的位置：", scrollTop);// window.pageYOffset (支持IE9+)// var scrollTop = frameWidow.pageYOffset;// var scrollTop = frameWidow.document.scrollingElement.scrollTop;};};</script></html>
frame.html
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>iframe或document监听滚动事件</title><style>html,body {padding: 0;margin: 0;}</style></head><body><h1>这是1号标题</h1><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><h2>这是2号标题</h2><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><h3>这是3号标题</h3><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><h4>这是4号标题</h4><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><h5>这是5号标题</h5><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><h6>这是6号标题</h6><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p></body><script>// 判断是否可滑动function isScrollable(ele) {const hasScrollableContent = ele.scrollHeight > ele.clientHeight;const overflowYStyle = window.getComputedStyle(ele).overflowY;const isOverflowHidden = overflowYStyle.indexOf('hidden') !== -1;return hasScrollableContent && !isOverflowHidden;}window.onload = function() {console.log(document.scrollingElement)let result = isScrollable(document.scrollingElement);console.log("frame是否可滑动：", result)setTimeout(() => {// 两端通用// document.scrollingElement.scrollTop = 100// 适用PC端// frameWidow.document.documentElement.scrollTop = 200// 适用移动端// frameWidow.document.body.scrollTop = 300// scrollTo()方法// frameWidow.scrollTo(0, 400)})};</script></html>
5.2 document本身不可滑动
demo.html 不作修改，frame.html 修改如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>iframe或document监听滚动事件</title><style>html,body {padding: 0;margin: 0;}</style></head><body><div style="width: 100%;height: 100vh;overflow: auto;"><h1>这是1号标题</h1><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><h2>这是2号标题</h2><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><h3>这是3号标题</h3><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><h4>这是4号标题</h4><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><h5>这是5号标题</h5><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><h6>这是6号标题</h6><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p></div></body><script>// 判断是否可滑动function isScrollable(ele) {const hasScrollableContent = ele.scrollHeight > ele.clientHeight;const overflowYStyle = window.getComputedStyle(ele).overflowY;const isOverflowHidden = overflowYStyle.indexOf('hidden') !== -1;return hasScrollableContent && !isOverflowHidden;}window.onload = function() {console.log(document.scrollingElement)let result = isScrollable(document.scrollingElement);console.log("frame是否可滑动：", result)setTimeout(() => {// 两端通用// document.scrollingElement.scrollTop = 100// 适用PC端// frameWidow.document.documentElement.scrollTop = 200// 适用移动端// frameWidow.document.body.scrollTop = 300// scrollTo()方法// frameWidow.scrollTo(0, 400)})};</script></html>
相关文章：
iframe或document监听滚动事件不起作用
有时候我们会遇到监听iframe或document的滚动事件不起作用的情况，在排除代码写错的情况下，我们应该考虑此时的document是否可以滑动。 1、为什么document不能监听滑动? 就很奇怪，明明页面时有滚动条的，为什么说document不可滑动…...
基频估计算法简介
基频估计算法 F0 estimate methods 估计F0的方法可以分为三类:基于时域、基于频域、或混合方法。本文详细介绍了这些方法。 所有的算法都包含如下三个主要步骤： 1.预处理：滤波，加窗分帧等 2.搜寻：可能的基频值F0（候选…...
linux修改DNS 系统版本Kylin V10桌面版
配置DNS在银河麒麟桌面操作系统V10 SP1 中修改DNS信息，直接修改/etc/resolv.conf文件中的DNS信息，不能生效。应该参考如下步骤：一、首先修改 /etc/systemd/resolved.conf文件，在其中添加DNS信息在终端中执行以下命令：s…...
如何使用 AWS Lambda 运行 selenium
借助 AWS Lambda 运行 selenium 来爬取网络数据。 简介 与手动从网站收集数据相比，爬虫可以为我们节省很多时间，对于爬虫的每次请求而言，这相当于 AWS Lambda 的每次函数的运行。 AWS Lambda 是一种将脚本部署到云的简单且价格低廉的服务&…...
认识Cesium旋转大小变量
前文代码中有如下；矩阵乘以旋转大小，还放入mat； Cesium.Matrix4.multiply(mat, rotationX, mat); 初看以为rotationX是一个数值，因为矩阵可以和数相乘； 但是看它的代码，rotationX是由一长串代码获得的&a…...
异响加持、吐槽声不断，小鹏G9难解困局
小鹏汽车的烦恼就好比红尘中的三千青丝，小鹏G9“惊魂48小时”的恐慌还未平息，车门异响等问题就已经层出不穷，再次将小鹏汽车推上风口浪尖。 可以毫不客气的说，G9承载着小鹏汽车盈利的希望，但在原本处于上升之势的G9却…...
【react】react18的学习
一、安装 $ create-react-app [Project name]默认支持sass 二、核心依赖 react：react 核心 react-dom：用于开发渲染web 应用； react-scripts：封装webpack服务； "start": "react-scripts start&quo…...
Ep_操作系统面试题-什么是线程，线程和进程的区别
1. 一个进程中可以有多个线程,多个线程共享进程的堆和方法区 (JDK1.8 之后的元空间),但是每个线程有自己的程序计数器、虚拟机栈和 本地方法栈。 2.进程是资源分配的最小单位，线程是CPU调度的最小单位 视频讲解: https://edu.csdn.net/course/detail/38090 点我…...
最流行的自动化测试工具，总有一款适合你（附部分教程）
前言 在自动化测试领域，自动化工具的核心地位毋庸置疑。本文总结了最顶尖的自动化测试工具和框架，这些工具和框架可以帮助组织更好地定位自己，跟上软件测试的趋势。这份清单包含了开源和商业的自动化测试解决方案。 1）Selenium …...
Shell高级——进程替换vs管道
以下内容源于C语言中文网的学习与整理，如有侵权请告知删除。 1、问题引入 这里将Shell中的“进程替换”与“管道”放在一起讲，是因为两者的作用几乎类似。 进程替换：将一个命令的输出结果传递给另一个（组）命令。 管…...
国内有哪些支持定制化的低代码平台？
编者按：贴合企业业务需求的系统才是好系统，高程度的定制能力平台意味着可以提供更高契合度的产品，更好地匹配业务需求。本文介绍了国内支持定制化的老厂商低代码平台，具有源码交付、私有化部署、国产化、数据对接等优势。关键词&a…...
Altair 宣布将于3月举办 Future.Industry 2023 全球虚拟大会
Altair（纳斯达克股票代码：ALTR）近日宣布将于 2023 年 3 月 8 - 9 日 举办年度全球虚拟大会 Future.Industry 2023。旨在探索影响全球未来的新趋势，并深入探讨仿真、高性能计算 (HPC)、人工智能（AI）和数据分…...
react lazyLoad学习记录
react lazyLoad学习记录1.lazyLoad用处2.使用2.1 react-router-dom5版本写法2.2 react-router-dom6版本写法1.lazyLoad用处 默认例如首页，如果有好十几个甚至百个路由，react是会默认一下全部把路由组件一下全部加载的，极可能造成页面卡顿。r…...
29 openEuler管理网络-配置网络绑定
文章目录29 openEuler管理网络-配置网络绑定29.1 使用nmcli29.2 使用命令行29.2.1 检查是否已安装Bonding内核模块29.2.2 创建频道绑定接口29.2.3 创建从属接口29.2.4 激活频道绑定29.2.5 创建多个绑定29 openEuler管理网络-配置网络绑定 29.1 使用nmcli 创建名为bond0的绑定&…...
RTT 全志D1s RDC2022纪念版开发板开箱使用分享与折腾记录
原文链接：https://bbs.aw-ol.com/topic/3021/ 作者caoxuetian 1：开发板介绍 RTT D1s RDC2022纪念版开发板是一块基于全志科技RISC-V内核 芯片 D1S的小尺寸开发板，尺寸仅为5.5cm*4cm，能够已非常小的体积带来舒适的开发感受&#…...
24日常实习万得一面面径
文章目录分析与复盘面试题分析与复盘 应该将项目进行复习好的，两个项目都应该对简历写的那些进行复习，以为日常不问项目的一面。哭死… 面试题 1.自我介绍 2.为什么从土木转到开发，学习java有哪些途径 3.介绍下项目中你觉得最有设计的模…...
MySQL的DML和DDL操作（1）
这里介绍几种DML操作INSERT INTO——插入记录插入一条记录插入一条记录 INSERT INTO table [(column [, column . ])] VALUES(value [,value . ]); 例子： insert into student values( 1,"承太郎" )default charset utf8；插入多条记录插入多条…...
Kafka系列之：Kafka生产者和消费者
Kafka系列之：Kafka生产者和消费者 一、Kafka生产者发送流程二、提高生产者吞吐量三、Kafka消费方式四、Kafka消费者总体工作流程五、按照时间消费Kafka Topic一、Kafka生产者发送流程 batch.size：只有数据积累到batch.size之后，sender才会发送数据，默认16K。linger.ms：如果…...
Linux进程间通信：信号量(一)
前提知识 在介绍信号量之前，先来看看一些概念和一些简单的前提知识： 进程间通信的前提是让不同的进程看到同一份资源。于是，就有提出让这种资源成为一种公共资源的方法，方法的提出，导致了一种新的问题的出现…...
Python笔记一之excel的读取
这里我常用的 python 对于 excel 的读取库有两个，一个是 xlsxwriter 用于操作 excel 的写入，一个是 xlrd 用于 excel 文件的读取。 使用的库的版本如下： xlsx1.2.6xlrd1.1.0 xlsxwriter 写入 excel 新建一个 excel import xlsxwriterpat…...
JavaScript Number 数字对象
文章目录JavaScript Number 数字对象JavaScript 数字所有 JavaScript 数字均为 64 位精度八进制和十六进制无穷大（Infinity）NaN - 非数字值数字可以是数字或者对象数字属性数字方法JavaScript Number 数字对象 JavaScript 只有一种数字类型。 可以使用也…...
设计模式-服务定位器模式
设计模式-服务定位器模式一、背景1.1 服务定位模式1.2 策略模式二、代码实战2.1 服务定位器2.2 配置ServiceLocatorFactoryBean2.3 定义一个支付的接口2.4 根据不同类型处理Bean2.5 controller层三、项目结构及测试结果3.1 测试结果3.2 项目结构及源码(欢迎star)四、参考资料一…...
Android Dalvik虚拟机 GC流程分析
前言 本篇继续介绍安卓dalvik虚拟机，介绍Dalvik虚拟技的GC流程。 GC结构体 dalvik/vm/alloc/Heap.h static const GcSpec kGcForMallocSpec {true, /* isPartial */false, /* isConcurrent */true, /* doPreserve */"GC_FOR_ALLOC" }; /* Not eno…...
opencv读入图片注意事项
来源：投稿 作者：蓬蓬奇 编辑：学姐 深度学习数据预处理中常用opencv读入图片，一般在__getitem__函数中调用。本文主要介绍opencv读取图片的一些细节以及注意事项。本文中使用的图片见第6节“opencv测试使用的图片”。 1.如何通过o…...
学习渗透测试，考CISP-PTE还是考NISP-PT证书呢？
其实两者都可以，但是要看考生的实际需求！ 为什么说两者都可以？ 两个证书都由中国信息安全测评中心颁发，CISP-PTE（注册信息安全渗透测试工程师）,NISP-PT（国家信息安全水平考试渗透测试工程师),…...
记录自己遇到的关于Hashmap的面试题
一.麻烦讲述一下Hashmap的扩容原理 jdk1.8中的hashmap扩容原理 1.put流程图 首先贴一张图(图片来源于传送门），多谢大佬的美图，此图已经完美的描述了put的整个流程，我也就不想自己画了，嘿嘿: 2.hashmap中几个比较重…...
mysql数据库之sql语句性能分析工具
一、sql执行频率。 mysql客户端连接成功后，通过show [session | global] status 命令可以提供服务器状态信息。通过如下指令，可以查看当前数据库的INSERT/UPDATE/DELETE的访问频次。 #一个下划线代表一个字符 show global status like com_; 二、慢查…...
搭建SpringBoot项目
文章目录前言准备工具创建项目前言 为什么使用SpringBoot?它有什么好处？ SpringBoot可以快速构建出独立的Spring应用，简化了配置文件。内嵌Tomcat服务器，无须手动部署war文件。 准备工具 idea2022navicat16postmanjdk1.8 创建项目 File-&…...
“一网统管”视频融合平台EasyCVR页面tab切换细节优化
EasyCVR视频融合平台基于云边端协同架构，能支持海量视频的轻量化接入与汇聚管理，借助大数据分析的决策判断，为网络摄像头、网络存储设备、智能终端、无人机、车载设备、移动执法仪、视频监控平台等提供一体化的视频接入、分发、存储、处理等能…...
【Python入门第二十天】Python Lambda
lambda 函数是一种小的匿名函数。 lambda 函数可接受任意数量的参数，但只能有一个表达式。 语法 lambda arguments : expression执行表达式并返回结果： 实例 一个 lambda 函数，它把作为参数传入的数字加 10，然后打印结果&…...
网站建设的发展目标/营销推广方案
声明第三方字体 font-face {font-family: myFirstFont;src: url(Sansation_Light.ttf),url(Sansation_Light.eot); /* IE9 */ } 使用font-face指定字体的名称和资源地址。 使用第三方字体 示例 <div> 使用 CSS3,网站终于可以使用字体以外的预先选择“合法”字体 <…...
电子商务网站管理系统/河南品牌网络推广外包
分析FileInputStream，其中finalize()被覆写，优先使用finalize(),close()方法可能内存泄漏，或者手动colse()之前做好检查package java.io;import java.nio.channels.FileChannel;import sun.nio.ch.FileChannelImpl;/*** A FileInputStream ob…...
东莞做网站/seo网上培训课程
Qunit是一个用于JavaScript单元测试的框架。如果你想使用Qunit启动测试，你需要在HTML文件中包含Qunit的脚本文件和样式文件，然后在JavaScript代码中使用Qunit的API来编写测试用例和测试函数。下面是一个简单的HTML文件，使用Qunit测试一个简单的JavaScript函数： <!DOCTYP…...
绍兴网站建设哪家好/平台广告推广
返璞归真这几天项目有一个linux下部署数据库的操作，数据库使用python进行初始化安装。然后问题来了，由于linux服务器涉及安全要求，除了代码以来的Python3.6版本外不允许安装其他插件与工具，不巧的是python的代码报错了…如果放在平…...
网站首页面设计代码/中小企业网络营销现状
思路 根据欧拉图的概念来。注意 点数为1；有孤立点；代码实现 T掉的dfs... 1 #include<cstdio>2 const int maxn1e510;3 const int maxm5e510;4 int t,n,m,s;5 int a,b;6 int ld[maxn],cd[maxn],lj[maxn];7 int h[maxn],hs1;8 int e_s[maxm],e_n[max…...
做商城网站系统/百度网盘资源共享
概述 Nginx 使用内存池对内存进行管理，内存管理的实现类似于前面文章介绍的《STL源码剖析——空间配置器》，把内存分配归结为大内存分配 和小内存分配。若申请的内存大小比同页的内存池最大值 max 还大，则是大内存分配，否则为小内…...