当前位置： 首页 > news >正文

iframe或document监听滚动事件不起作用

news 2025/10/28 7:25:57

有时候我们会遇到监听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的滚动事件不起作用的情况&#xff0c;在排除代码写错的情况下&#xff0c;我们应该考虑此时的document是否可以滑动。 1、为什么document不能监听滑动? 就很奇怪&#xff0c;明明页面时有滚动条的&#xff0c;为什么说document不可滑动…...

编程日记 2023/3/2 8:26:22

基频估计算法简介

基频估计算法 F0 estimate methods 估计F0的方法可以分为三类:基于时域、基于频域、或混合方法。本文详细介绍了这些方法。 所有的算法都包含如下三个主要步骤&#xff1a; 1.预处理&#xff1a;滤波&#xff0c;加窗分帧等 2.搜寻&#xff1a;可能的基频值F0&#xff08;候选…...

编程日记 2023/3/2 8:25:11

linux修改DNS 系统版本Kylin V10桌面版

配置DNS在银河麒麟桌面操作系统V10 SP1 中修改DNS信息&#xff0c;直接修改/etc/resolv.conf文件中的DNS信息&#xff0c;不能生效。应该参考如下步骤&#xff1a;一、首先修改 /etc/systemd/resolved.conf文件&#xff0c;在其中添加DNS信息在终端中执行以下命令&#xff1a;s…...

编程日记 2023/3/2 8:23:59

如何使用 AWS Lambda 运行 selenium

借助 AWS Lambda 运行 selenium 来爬取网络数据。 简介 与手动从网站收集数据相比&#xff0c;爬虫可以为我们节省很多时间&#xff0c;对于爬虫的每次请求而言&#xff0c;这相当于 AWS Lambda 的每次函数的运行。 AWS Lambda 是一种将脚本部署到云的简单且价格低廉的服务&…...

编程日记 2023/3/2 8:22:35

认识Cesium旋转大小变量

前文代码中有如下&#xff1b;矩阵乘以旋转大小&#xff0c;还放入mat&#xff1b; Cesium.Matrix4.multiply(mat, rotationX, mat); 初看以为rotationX是一个数值&#xff0c;因为矩阵可以和数相乘&#xff1b; 但是看它的代码&#xff0c;rotationX是由一长串代码获得的&a…...

编程日记 2023/3/2 8:21:26

异响加持、吐槽声不断，小鹏G9难解困局

小鹏汽车的烦恼就好比红尘中的三千青丝&#xff0c;小鹏G9“惊魂48小时”的恐慌还未平息&#xff0c;车门异响等问题就已经层出不穷&#xff0c;再次将小鹏汽车推上风口浪尖。 可以毫不客气的说&#xff0c;G9承载着小鹏汽车盈利的希望&#xff0c;但在原本处于上升之势的G9却…...

编程日记 2023/3/2 8:20:06

【react】react18的学习

一、安装 $ create-react-app [Project name]默认支持sass 二、核心依赖 react&#xff1a;react 核心 react-dom&#xff1a;用于开发渲染web 应用&#xff1b; react-scripts&#xff1a;封装webpack服务&#xff1b; "start": "react-scripts start&quo…...

编程日记 2023/3/2 8:19:00

Ep_操作系统面试题-什么是线程，线程和进程的区别

1. 一个进程中可以有多个线程,多个线程共享进程的堆和方法区 (JDK1.8 之后的元空间),但是每个线程有自己的程序计数器、虚拟机栈和 本地方法栈。 2.进程是资源分配的最小单位&#xff0c;线程是CPU调度的最小单位 视频讲解: https://edu.csdn.net/course/detail/38090 点我…...

编程日记 2023/3/2 8:17:20

最流行的自动化测试工具，总有一款适合你（附部分教程）

前言 在自动化测试领域&#xff0c;自动化工具的核心地位毋庸置疑。本文总结了最顶尖的自动化测试工具和框架&#xff0c;这些工具和框架可以帮助组织更好地定位自己&#xff0c;跟上软件测试的趋势。这份清单包含了开源和商业的自动化测试解决方案。 1&#xff09;Selenium …...

编程日记 2023/3/2 8:16:02

Shell高级——进程替换vs管道

以下内容源于C语言中文网的学习与整理&#xff0c;如有侵权请告知删除。 1、问题引入 这里将Shell中的“进程替换”与“管道”放在一起讲&#xff0c;是因为两者的作用几乎类似。 进程替换&#xff1a;将一个命令的输出结果传递给另一个&#xff08;组&#xff09;命令。 管…...

编程日记 2023/3/2 8:14:43

国内有哪些支持定制化的低代码平台？

编者按&#xff1a;贴合企业业务需求的系统才是好系统&#xff0c;高程度的定制能力平台意味着可以提供更高契合度的产品&#xff0c;更好地匹配业务需求。本文介绍了国内支持定制化的老厂商低代码平台&#xff0c;具有源码交付、私有化部署、国产化、数据对接等优势。关键词&a…...

编程日记 2023/3/2 8:13:27

Altair 宣布将于3月举办 Future.Industry 2023 全球虚拟大会

Altair&#xff08;纳斯达克股票代码&#xff1a;ALTR&#xff09;近日宣布将于 2023 年 3 月 8 - 9 日 举办年度全球虚拟大会 Future.Industry 2023。旨在探索影响全球未来的新趋势&#xff0c;并深入探讨仿真、高性能计算 (HPC)、人工智能&#xff08;AI&#xff09;和数据分…...

编程日记 2023/3/2 8:12:08

react lazyLoad学习记录

react lazyLoad学习记录1.lazyLoad用处2.使用2.1 react-router-dom5版本写法2.2 react-router-dom6版本写法1.lazyLoad用处 默认例如首页&#xff0c;如果有好十几个甚至百个路由&#xff0c;react是会默认一下全部把路由组件一下全部加载的&#xff0c;极可能造成页面卡顿。r…...

编程日记 2023/3/2 8:10:40

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的绑定&…...

编程日记 2023/3/2 8:09:28

RTT 全志D1s RDC2022纪念版开发板开箱使用分享与折腾记录

原文链接&#xff1a;https://bbs.aw-ol.com/topic/3021/ 作者caoxuetian 1&#xff1a;开发板介绍 RTT D1s RDC2022纪念版开发板是一块基于全志科技RISC-V内核 芯片 D1S的小尺寸开发板&#xff0c;尺寸仅为5.5cm*4cm&#xff0c;能够已非常小的体积带来舒适的开发感受&#…...

编程日记 2023/3/2 8:08:22

24日常实习万得一面面径

文章目录分析与复盘面试题分析与复盘 应该将项目进行复习好的&#xff0c;两个项目都应该对简历写的那些进行复习&#xff0c;以为日常不问项目的一面。哭死… 面试题 1.自我介绍 2.为什么从土木转到开发&#xff0c;学习java有哪些途径 3.介绍下项目中你觉得最有设计的模…...

编程日记 2023/3/2 8:07:01

MySQL的DML和DDL操作（1）

这里介绍几种DML操作INSERT INTO——插入记录插入一条记录插入一条记录 INSERT INTO table [(column [, column . ])] VALUES(value [,value . ]); 例子&#xff1a; insert into student values( 1,"承太郎" )default charset utf8&#xff1b;插入多条记录插入多条…...

编程日记 2023/3/2 8:05:42

Kafka系列之：Kafka生产者和消费者

Kafka系列之：Kafka生产者和消费者 一、Kafka生产者发送流程二、提高生产者吞吐量三、Kafka消费方式四、Kafka消费者总体工作流程五、按照时间消费Kafka Topic一、Kafka生产者发送流程 batch.size：只有数据积累到batch.size之后，sender才会发送数据，默认16K。linger.ms：如果…...

编程日记 2023/3/2 8:04:17

Linux进程间通信：信号量(一)

前提知识 在介绍信号量之前&#xff0c;先来看看一些概念和一些简单的前提知识&#xff1a; 进程间通信的前提是让不同的进程看到同一份资源。于是&#xff0c;就有提出让这种资源成为一种公共资源的方法&#xff0c;方法的提出&#xff0c;导致了一种新的问题的出现&#xf…...

编程日记 2023/3/2 8:02:51

Python笔记一之excel的读取

这里我常用的 python 对于 excel 的读取库有两个&#xff0c;一个是 xlsxwriter 用于操作 excel 的写入&#xff0c;一个是 xlrd 用于 excel 文件的读取。 使用的库的版本如下&#xff1a; xlsx1.2.6xlrd1.1.0 xlsxwriter 写入 excel 新建一个 excel import xlsxwriterpat…...

编程日记 2023/3/2 8:01:31

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2025/10/27 21:11:19

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2025/10/8 22:39:15

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2025/10/17 3:57:58

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

编程新知 2025/10/26 17:18:45

Python：操作 Excel 折叠

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

编程新知 2025/10/20 3:38:39

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2025/10/27 13:23:12

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

编程新知 2025/9/12 15:10:44

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/10/2 6:08:50

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

编程新知 2025/10/24 16:03:46

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2025/10/25 12:19:57