vue中重新获取数据导致页面加长,要求在页面更新之后浏览器滚动条滚动到之前浏览记录的位置。以及获取当前页面中是哪个元素产生滚动条的方法。

目前的页面样式为:

vue中重新获取数据导致页面加长,要求在页面更新之后浏览器滚动条滚动到之前浏览记录的位置。以及获取当前页面中是哪个元素产生滚动条的方法。_第1张图片

 代码是:

  

首先获取当前el-table的高度(此处$refs后的multipleTable是在el-table中用ref绑定的值)

 let positionHeight = this.$refs.multipleTable.bodyWrapper.scrollHeight;

其次用接口获取新数据(也就是更新logDetailList里的值),将新数据渲染到页面中。

最后用$nextTick方法在数据渲染完成之后的滚动条定位定到之前的位置上。

(1)获取新数据的el-table长度

let positionHeight2 = this.$refs.multipleTable.bodyWrapper.scrollHeight;

(2)长度相减。新数据页面的长度-旧数据页面长度=当前滚动条滚动位置

let screenHeight = positionHeight2 - positionHeight;

(3)设置滚动条位置。注:scrollTo方法必须是该页面存在滚动条的元素。且必须是el-table的父元素。

document.querySelector(".content-container").scrollTo(0, screenHeight);

这样就完成了。

附加 :

获取当前页面中是哪个元素产生滚动条的方法(vue中):页面滚动后控制台会打印

methods: {    
  findscroller(element) {
    element.onscroll = function() {
      console.log(element);
    };
  Array.from(element.children).forEach(this.findscroller);
 }
}
mounted() {
  this.findscroller()
}

 或者直接复制以下代码到控制台中。回车,拖动滚动条

function findscroller(element){
  element.onscroll=function () {
    console.log(element)
  }
  Array.from(element.children).forEach(findscroller)
}
findscroller(document.body)

vue中重新获取数据导致页面加长,要求在页面更新之后浏览器滚动条滚动到之前浏览记录的位置。以及获取当前页面中是哪个元素产生滚动条的方法。_第2张图片

 

你可能感兴趣的:(功能实现,知识点简述,element-ui,前端,css3,html5)