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

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

基频估计算法简介

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

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

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

如何使用 AWS Lambda 运行 selenium

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

认识Cesium旋转大小变量

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

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

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

【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…...

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

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

最流行的自动化测试工具,总有一款适合你(附部分教程)

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

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

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

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

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

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

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

react lazyLoad学习记录

react lazyLoad学习记录1.lazyLoad用处2.使用2.1 react-router-dom5版本写法2.2 react-router-dom6版本写法1.lazyLoad用处 默认例如首页&#xff0c;如果有好十几个甚至百个路由&#xff0c;react是会默认一下全部把路由组件一下全部加载的&#xff0c;极可能造成页面卡顿。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纪念版开发板开箱使用分享与折腾记录

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

24日常实习万得一面面径

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

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;插入多条记录插入多条…...

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

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

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

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

Python笔记一之excel的读取

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

基于算法竞赛的c++编程(28)结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

Python+ZeroMQ实战:智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...