1. 首先要獲取薄湿,每個(gè)table 離頂端的距離叫倍, 用v-for來設(shè)置每個(gè)table, 則
?HTMLElement.offsetParent?是一個(gè)只讀屬性偷卧,返回一個(gè)指向最近的包含該元素的定位元素。如果沒有定位的元素吆倦,則?offsetParent?為最近的?table,?table cell?或根元素(標(biāo)準(zhǔn)模式下為?html听诸;quirks 模式下為?body)。當(dāng)元素的?style.display?設(shè)置為 "none" 時(shí)蚕泽,offsetParent?返回?null晌梨。
let tableIarray = document.querySelectorAll(".table"); //獲取到每一個(gè)table
for (let i = 0; i < tableIarray?.length; i++)
{? ? ? ? this.tableList.push(tableIarray[i]["offsetTop"]);? ? ? //tableIarray[i].offtop 是每一個(gè)table離父組件頂端的距離,它返回當(dāng)前元素相對于其?offsetParent?元素的頂部的距離须妻。
}? ?
2. 滾動(dòng)條向下滾動(dòng)仔蝌,table 向上移動(dòng)的時(shí)候,scrollTop會改變荒吏,當(dāng)scrollTop到了之前記錄的offsetTop的值時(shí)敛惊,則講導(dǎo)航欄的KeY進(jìn)行切換成對應(yīng)的index值,這樣導(dǎo)航欄也跟著變化了
? ? 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. 當(dāng)點(diǎn)擊導(dǎo)航時(shí)绰更,所需顯示的內(nèi)容立刻顯示在可視區(qū)瞧挤。
Element?接口的scrollIntoView()方法會滾動(dòng)元素的父容器,使被調(diào)用scrollIntoView()的元素對用戶可見儡湾。
點(diǎn)擊導(dǎo)航特恬,獲取到你需要顯示的內(nèi)容的元素,如id盒粮, 則根據(jù)Id找到元素anchorElement = document.getElementById(id)鸵鸥, 然后就可以直接調(diào)用anchorElement.scrollIntoView()方法,則需要顯示的內(nèi)容立刻顯示在當(dāng)前可視區(qū)丹皱。