在開發網頁時，經常需要獲取頁面元素的scrollTop值來實現一些特定的功能，例如滾動到指定位置展示內容、監聽滾動事件等等。本文將介紹如何使用Vue獲取元素scrollTop值，來實現滾動相關的功能。

mounted() {
window.addEventListener('scroll', this.onScroll)
},
methods: {
onScroll() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollTop)
}
}

在Vue的生命周期中，mounted()函數表示組件已經被掛載到DOM樹上，可以進行一些操作，這里我們需要監聽scroll事件，來及時獲得當前頁面的scrollTop值。

在代碼中，我們通過window.addEventListener()函數來監聽scroll事件，第一個參數為事件名，這里使用scroll事件，第二個參數為回調函數，通過this.onScroll來指向Vue組件中的方法。

在Vue中的方法中，我們可以通過document.documentElement.scrollTop或document.body.scrollTop來獲取當前頁面的scrollTop值，因為在不同的瀏覽器中，獲取scrollTop的方式是不同的，有些瀏覽器獲取document.documentElement.scrollTop，有些則獲取document.body.scrollTop ，所以我們需要兩者都判斷。

mounted() {
this.$refs.myRef.addEventListener('scroll', this.onScroll)
},
methods: {
onScroll() {
const scrollTop = this.$refs.myRef.scrollTop;
console.log(scrollTop)
}
}

在Vue中獲取元素scrollTop的另一個方法是使用$refs，$refs可以用來獲取元素的引用，在mounted()函數中，我們可以使用$refs來獲取元素的引用，然后通過addEventListener()方法添加scroll事件的監聽。

在回調函數中，我們可以通過this.$refs.myRef.scrollTop來獲取當前元素的scrollTop值，這里的myRef就是元素的引用名。

另外，需要注意的是，使用$refs獲取元素引用時，我們需要在元素上添加ref屬性，并給其賦值，例如：

這樣就可以使用 this.$refs.myRef來獲取該元素的引用了。

在使用$refs獲取元素scrollTop時，需要注意的是，使用$refs獲取元素引用時，需要在mounted()函數中才能獲取到元素，因為在此之前，元素還沒有掛載到頁面上，所以獲取不到。

綜上所述，獲取元素scrollTop值是開發網頁中常見的需求，Vue提供了兩種方法來獲取該值，一是通過document.documentElement.scrollTop或document.body.scrollTop來獲取，二是通過$refs獲取元素引用，然后使用元素的scrollTop屬性來獲取。