提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
提示:以下是本篇文章正文内容,下面案例可供参考
一、问题分析
因为一个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.name
if(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.scrollTop
console.log("左边滚动距离顶部的距离", isuPdfScrollTop);
},
3.给另一个iframe赋值scrollTop
需要注意的是赋值给容器,而不是被包裹的内容
不是图示所指的这一层
getIsuPdfScroll(e){
let isuPdfScrollTop = e.target.scrollTop
console.log("左边滚动距离顶部的距离", isuPdfScrollTop);
this.pdfIdIframe.getElementById('viewerContainer').scrollTop = isuPdfScrollTop
},