滚动页面，导航定位

1. 首先要获取，每个table 离顶端的距离， 用v-for来设置每个table, 则

 HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table, table cell 或根元素（标准模式下为 html；quirks 模式下为 body）。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。

offsettop概念

let tableIarray = document.querySelectorAll(".table"); //获取到每一个table

for (let i = 0; i < tableIarray .length; i++)

{        this.tableList.push(tableIarray[i]["offsetTop"]);      //tableIarray[i].offtop 是每一个table离父组件顶端的距离，它返回当前元素相对于其 offsetParent 元素的顶部的距离。

}   

2. 滚动条向下滚动，table 向上移动的时候，scrollTop会改变，当scrollTop到了之前记录的offsetTop的值时，则讲导航栏的KeY进行切换成对应的index值，这样导航栏也跟着变化了

scrollTop概念

    scrollToTop()

{      let scrollTop = this.$refs.scrollContainer.scrollTop;     

for (let i = 0; i < this.tableList.length; i++) {       

    if (          scrollTop > this.tableList[i] - 15 &&          scrollTop < this.tableList[i + 1]        )

    {          this.defaultSelectedKeys = i;        }       

    if (          i === this.tableList.length - 1 &&          scrollTop > this.tableList[i]        )

    {          this.defaultSelectedKeys = i;        }   

  }     

  },

33. 当点击导航时，所需显示的内容立刻显示在可视区。

scrollintoview概念

Element 接口的scrollIntoView()方法会滚动元素的父容器，使被调用scrollIntoView()的元素对用户可见。

点击导航，获取到你需要显示的内容的元素，如id， 则根据Id找到元素anchorElement = document.getElementById(id)， 然后就可以直接调用anchorElement.scrollIntoView()方法，则需要显示的内容立刻显示在当前可视区。