解决iframe内使用scrollIntoView导致外部父元素也滚动的问题

2023-11-07

功能场景:

解决iframe内使用scrollIntoView导致外部父元素也滚动的问题

滚动原因:

使用原生的 element.scrollIntoView() 时,会同时使 element 所在容器也会进行 scrollIntoView 操作,特别当 elment 为处于 iframe 中的一个元素,则当调用 element.scrollIntoView() ,不但使得 iframe 内的窗口滚动到 element 所在处,同时也会使主窗口滚动到 iframe 处


实现代码:

解决思路:外部设置监听,如果监听到滚动,则回到顶部。(此种方法算是曲线救国,根本上无法阻止scrollIntoView引起外部滚动,但是可以用户无感知的情况下的回到顶部)

实现代码:

    mounted() {
      window.onscroll = function () {
        window.scrollTo(0, 0);
      };
    },

另外也可参考博主的重写scrollIntoView方法,参考链接:SCROLLINTOVIEW 实现

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

解决iframe内使用scrollIntoView导致外部父元素也滚动的问题 的相关文章

随机推荐

  • 【C语言】17-函数-3

    1 链接属性 当组成一个程序的各个源文件分别被编译之后 所有的目标文件以及那些从一个或多个函数库中引用的函数将链接在一起 形成可执行程序 然而 如果相同的标识符出现在几个不同的源文件中时 它们是表示同一个实体 还是表示不同的实体 标识符的链
  • vc不认识 CTreeView

    在VC中调用 CTreeView 方法是 VC会提示error c2504 CTreeView base class undefined CTreeView的基类没有被定义 必须在系统头文件声明处 StdAfx h 加入其头文件 afxcv
  • 把Windows安装到U盘,给Mac电脑用

    启动转换助理是在mac的硬盘分区装win10 mac硬盘金贵呀 以下解决方案把win10安装在u盘 不安装在mac硬盘上 想用的时候插上mac电脑即可 1 把win安装在u盘上 首先在启动转换助理上下载windowssupport文件 具体
  • iOS开发实战之app获取通讯录(iOS 9)

    在做通讯类APP的时候 时常会访问到手机的通讯录 来获取联系人的各种属性 那么本文就来讨论一下怎么获取通讯录 注意 iOS 9 版本上可以行 其他版本未试 第一步 先导入系统库 Contacts framework 然后在 h上导入头文件
  • VGG与风格迁移算法原理

    一 实验介绍 1 1 实验内容 上节课我们学习了卷积神经网络的基本原理 本节实验我们将学习用于图像风格迁移的经典的卷积神经网络模型VGG 并用caffe提供的 draw net py 实现模型的可视化 本节实验我们也将学习图像风格转换的算法
  • 11月22日 EQS优化,让AI知道什么地方不能走,自定义游戏模式,让AI在玩家旁边生成,难度提升,随着时间增多的AI

    EQS优化 让AI知道什么地方不能走 首先进行小修改 创建一个新的AIEQS 新建一个测试pawn 把测试pawn放入场景内 在eqs中放入我们写的eqs任务 使用模拟游戏 就可以直接可视化eqs的选择坐标点 https docs unre
  • JMeter之压力测试——混合场景并发

    在实际的压力测试场景中 有时会遇到多个场景混合并发的情况 这时就需要设置不同的并发比例对不同场景请求数量的控制 下面提供两种方案 一 多线程组方案 1 业务场景设计如下 场景A 场景B 场景C 三个场景按照并发比例要求进行100个用户并发的
  • c语言rand的最大值,[讨论]有关rand()生成数的大小..

    讨论 有关rand 生成数的大小 我想生成 bits的随机数 现在想知道rand 最大能生成多少bits的随机数 搜索更多相关的解决方案 rand 成数 解决方案 当然是32位可以表示的最大数 解决方案 可是经过反复测试 是生成的 位的随机
  • 容器化部署zabbix

    一 创建docker compose yml文件 首先创建一份docker compose yml文件 使用docker compose进行容器的编排 mkdri zabbix 在根目录创建zabbix文件 cd zabbix touch
  • Windows蓝屏代码大全及解决提示

    知识点分析 电脑出现蓝屏现象时 由于导致蓝屏现象的原因较多 建议先通过此款软件进行分析 简单确定蓝屏原因 操作步骤 BlueScreenView不需要任何安装过程或额外的DLL文件 只需运行可执行文件 BlueScreenView exe就
  • Linux下Apache Web服务器的安装与配置

    1 Apache Web服务器简述 Web服务是目前Internet应用最流行 最受欢迎的服务之一 Linux平台使用最广泛的Web服务器是Apache 它是目前性能最优秀 最稳定的Web服务器之一 WWW World Wide Web 服
  • 【Qt】控件探幽——QPushbutton

    注1 本系列文章使用的Qt版本为Qt 6 3 1 注2 本系列文章常规情况下不会直接贴出源码供复制 都以图片形式展示 所有代码 自己动手写一写 记忆更深刻 本文目录 QPushButton探幽 1 clicked bool 信号的参数的含义
  • Spring学习-5-JdbcTemplate数据库操作

    针对数据库的操作 Spring框架提供了JdbcTemplate类 该类是Spring框架数据抽象层的基础 可以说 JdbcTemplate类是Spring JDBC的核心类 在JdbcTemplate核心类中 提供了大量的更新和查询数据库
  • Android面试题之性能优化篇,kotlin版权

    1 如何对 Android 应用进行性能分析 不考虑使用其他第三方性能分析工具的话 我们可以直接使用 ddms 中的工具 其实 ddms 工具已经非常的强大了 ddms 中有 traceview heap allocation tracke
  • Ad15的元器件的3D制作

    1 画元器件的封装 2 在中设置元器件的高度以及浮空高度 颜色 3 然后会出现话网格的箭头 进行绘画 此时已完成3d的绘制 按3试一下效果 4
  • Numpy高级数组索引

    NumPy 高级索引 NumPy 比一般的 Python 序列提供更多的索引方式 除了之前看到的用整数和切片的索引外 数组可以由整数数组索引 布尔索引及花式索引 整数数组索引 对于一个二维数组 要获取数组中 0 0 1 1 和 2 0 位置
  • clusterrole访问权限

    什么是RBAC RBAC全称Role Based Access Control 是Kubernetes集群基于角色的访问控制 实现授权决策 允许通过Kubernetes API动态配置策略 什么是Role Role是一组权限的集合 例如Ro
  • cjson 判断字段是否纯在_cJSON API 接口使用说明

    cJSON API 接口使用说明 cJSON的介绍 cJSON是一个轻量级的JSON解析器使用ANSIC标准 所谓的轻量级 如果你的项目需要使用到解析JSON 那么只需要将cJSON的库中的cJSON h和cJSON c放入到你的项目中适当
  • Linux防火墙命令

    文章目录 一 Linux防火墙基本命令 1 查看防火墙状态 2 开启防火墙 3 关闭防火墙 4 重启防火墙 5 禁用防火墙 禁止开机启动 6 开机启用防火墙 开机自启防火墙 7 查看防火墙所有开放的端口 8 开放指定端口号 9 关闭指定端口
  • 解决iframe内使用scrollIntoView导致外部父元素也滚动的问题

    功能场景 解决iframe内使用scrollIntoView导致外部父元素也滚动的问题 滚动原因 使用原生的 element scrollIntoView 时 会同时使 element 所在容器也会进行 scrollIntoView 操作