vue之獲取滾動條位置

前言

記錄一下獲取滾動條相對距離和絕對距離的方法

說明（個人理解）

• 相對距離
  當前滾動條到父滾動條的距離
• 絕對距離
  當前滾動條到頁面頂部的位置

實例

1.獲取當前組件DOM標簽滾動條位置

// 為保證DOM節點加載完畢，要在 mounted 中實現
// 使用 $refs 獲取DOM實例，以 tree 為例
mounted() {
    this.$refs.tree.addEventListener('scroll', e => {
        console.log('父滾動條到頁面頂部距離', e.target.offsetTop)
        console.log('相對距離', this.$refs.tree.scrollTop)
        console.log('絕對距離', e.target.offsetTop + this.$refs.tree.scrollTop)
    }, false)
}

2.獲取子組件DOM標簽滾動條位置

mounted() {
    this.$refs.tree.$el.addEventListener('scroll', e => {
        console.log('父滾動條到頁面頂部距離', e.target.offsetTop)
        console.log('相對距離', this.$refs.tree.$el.scrollTop)
        console.log('絕對距離', e.target.offsetTop + this.$refs.tree.$el.scrollTop)
    }, false)
},

總結

• 當使用 $refs 獲取DOM實例時，如果加在當前組件DOM節點上，則獲取的是DOM實例。如果加在子組件上，則獲取的是子組件實例，可以再使用 $el 獲取到組件實例對應的DOM實例