提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一、问题分析
二、记录爬坑过程
- 1.获取dom
- - 错误操作：在mounted里面this.$nextTick，如果场景里面有tab切换，肯定是获取不到的
  - 正确操作：tab切换到当前tab栏，考虑到加载dom的异步问题，加了一个定时器settimeout，这个时候使用this.$nextTick作用不大
- 2.获取当前iframe窗口滚动条距离顶部的距离
- - 错误操作：想通过window.frames["isuPdfId"].document获取
  - 正确操作：通过事件对象
- 3.给另一个iframe赋值scrollTop
- - 需要注意的是赋值给容器，而不是被包裹的内容
  - 提示：以上描述仅仅是个人笔记，具体情况具体分析

提示：以下是本篇文章正文内容，下面案例可供参考

一、问题分析

因为一个PDF是盖了章，一个PDF是没有盖章的，所以两个PDF要同步滚动方便用户做一个比较，实现思路就是获取dom后监听其中任何一个滚动事件，通过改变scrollTop来做到同步滚动，下面做个记录方便后期查阅

二、记录爬坑过程

1.获取dom

错误操作：在mounted里面this.$nextTick，如果场景里面有tab切换，肯定是获取不到的

mounted() {this.$nextTick(()=>{window.frames["isuPdfId"].document.addEventListener("scroll", this.getIsuPdfScroll, true);window.frames["pdfId"].document.addEventListener("scroll", this.getPdfScroll, true);})
}

正确操作：tab切换到当前tab栏，考虑到加载dom的异步问题，加了一个定时器settimeout，这个时候使用this.$nextTick作用不大

tabHandleClick(tab, event){this.activeName = tab.nameif(this.activeName == "3"){setTimeout(()=>{window.frames["isuPdfId"].document.addEventListener("scroll", this.getIsuPdfScroll, true);window.frames["pdfId"].document.addEventListener("scroll", this.getPdfScroll, true);}, 100)}
},

2.获取当前iframe窗口滚动条距离顶部的距离

错误操作：想通过window.frames[“isuPdfId”].document获取

//获取iframe之后，通过原生JS获取滚动的盒子元素，再获取scrollTop
let isuPdfIdIframe = window.frames["isuPdfId"].document
isuPdfIdIframe..document.getElementsByClassName('pdfViewer').scrollTop
//经过多次调试，最终以失败告终，这个时候的scrollTop始终为0

正确操作：通过事件对象

//这里的事件对象不需要通过window.frames["isuPdfId"].document.addEventListener("scroll", this.getIsuPdfScroll(e), true);这样获取，这样会直接报错e undefined，这样写getIsuPdfScroll(e)就可以了
getIsuPdfScroll(e){let isuPdfScrollTop = e.target.scrollTopconsole.log("左边滚动距离顶部的距离", isuPdfScrollTop);
},

3.给另一个iframe赋值scrollTop

需要注意的是赋值给容器，而不是被包裹的内容

不是图示所指的这一层

    getIsuPdfScroll(e){let isuPdfScrollTop = e.target.scrollTopconsole.log("左边滚动距离顶部的距离", isuPdfScrollTop);this.pdfIdIframe.getElementById('viewerContainer').scrollTop = isuPdfScrollTop},

提示：以上描述仅仅是个人笔记，具体情况具体分析

vue中两个iframe滚动条同步滚动问题总结相关推荐

vue实现两个区域滚动条同步滚动
项目开发中,遇到一个比较两个form差异的需求,但当item过多就需要滚动条,这里就用到了滚动条同步的地方,其实原理和git的差异比较差不多,这里来做一下分析.这是效果图要点分析: 其实主要是通过r ...
Vue中两个让你幸福感爆棚的组件导入小技巧之require.context
前言小伙伴们大家好,在上一篇文章Vue中两个让你幸福感爆棚的组件导入小技巧之循环代替Ctrl C/V(独家总结)中我们已经学习了一个注册全局组件的小技巧,使得我们在注册大量全局组件时不再被Vue.u ...
HTML 两个div滚动条同时滚动
实现思路: 1.通过jquery 监听div滚动事件来设置其他div同时滚动 2.为不是多个同时滚动div的滚动监听事件互相重复影响,通过当鼠标移动到哪个div上时使用哪个div进行 ...
两table水平滚动条级联滚动(同步滚动)。 table1放标题，table2放内容。
//table1=head和table2=body水平滚动条级联滚动 $(document).ready(function () { $("#bodyPanel").scroll( ...
vue项目：歌词随歌曲同步滚动
封装成对象,暴露出去共享使用 1.新建js文件 2.因为需要用到元素运动来实现歌词自上而下滚动的效果,又不想引用jquery增大js的加载,所有在对象内部封装了一个运动函数. 3.主要的函数是添加定时 ...
重写ScrollView实现两个ScrollView的同步滚动显示
1.背景介绍最近项目用到两个ScrollView的同步显示,即拖动左边的ScrollView滚动的同时,实现右边的ScrollView同步滚动.此种情形常用在复杂界面布局中,比如左边的ScrollV ...
html 两个iframe重叠,解决同一页面中两个iframe互相调用jquery,js函数的方法
这一个月又没更新博客,唉,懒癌又犯了,今天解决了一个问题,关于两个iframe互相调用jquery函数方法 a.html中有两个iframe,如下: b.html中有一个treeview,称为左菜单i ...
解决同一页面中两个iframe互相调用jquery,js函数
这一个月又没更新博客,唉,懒癌又犯了,今天解决了一个问题,关于两个iframe互相调用jquery函数方法 a.html中有两个iframe,如下: <iframewidth="100 ...
【245期】面试官：同类中两个方法加同步锁，多个线程支持同时访问这两个方法吗？...
点击上方"Java精选",选择"设为星标" 别问别人为什么,多问自己凭什么! 下方有惊喜,留言必回,有问必答! 每天 08:15 更新文章,每天进步一点点... ...

vue中两个iframe滚动条同步滚动问题总结

文章目录

一、问题分析

二、记录爬坑过程

1.获取dom

错误操作：在mounted里面this.$nextTick，如果场景里面有tab切换，肯定是获取不到的

正确操作：tab切换到当前tab栏，考虑到加载dom的异步问题，加了一个定时器settimeout，这个时候使用this.$nextTick作用不大

2.获取当前iframe窗口滚动条距离顶部的距离

错误操作：想通过window.frames[“isuPdfId”].document获取

正确操作：通过事件对象

3.给另一个iframe赋值scrollTop

需要注意的是赋值给容器，而不是被包裹的内容

提示：以上描述仅仅是个人笔记，具体情况具体分析

vue中两个iframe滚动条同步滚动问题总结相关推荐

最新文章

热门文章