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

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

---

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

一、问题分析

因为一个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
    },

---

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