2024-12-29 要拿到 DOM 實體要用_value

發表於 閱讀次數：
2024-12-29 要拿到 DOM 實體要用_value

2024-12-29 要拿到 DOM 實體要用_value

要拿到 DOM 實體要用 .value

非常棒的觀察！你完全說對了，我來幫你詳細拆解：

✅ 你問的這段程式碼：

1
2
3
4
const el = memberListRef.value
if (el) {
  el.scrollTop = el.scrollHeight
}

確實等同於：

1
2
3
if (memberListRef.value) {
  memberListRef.value.scrollTop = memberListRef.value.scrollHeight
}

👇 那這裡每個部分是什麼意思呢？

🔸 memberListRef.value

  • 因為 memberListRef 是一個 Vue 的 ref()，要拿到 DOM 實體要用 .value。
  • 這個對應的是 <div class="member-list" ref="memberListRef"> 裡的 DOM 元素。

🔸 scrollTop

  • 這是 DOM 元素的屬性。
  • 代表「目前這個區塊已經滾動了多少像素的距離」。
  • 你可以設定它，讓畫面自動捲動。

🔸 scrollHeight

  • 這是 DOM 元素的總高度（包含看不到的那部分，也就是整個捲軸的內容高度）。
  • 也就是「所有內容的總高度」。

✅ 所以這行的意思是：

1
el.scrollTop = el.scrollHeight

就是把「目前滾動距離」設成「整個內容的總高度」
➡️ 這樣畫面就會滾到底部啦！

❓為什麼要寫成這樣？為什麼不用合併？

兩種寫法都可以，這是純粹為了可讀性：

1
2
3
4
const el = memberListRef.value
if (el) {
  el.scrollTop = el.scrollHeight
}

這樣讓程式更好理解、也比較方便在 el 上加除錯點，或在未來擴充邏輯時多做別的事。

如果你還想進一步了解滾動的原理，或試著改成「每次新增都用動畫滾動到底」也可以，我可以幫你升級！🌟