修正錯誤TS2339 - 在'HTMLElement'上不存在屬性的方法

Question

當我按下「下一步」按鈕時，會觸發下面的程式碼，執行所需的操作（如果需要，捲動到我的元素）。

但出現此錯誤：錯誤TS2339：屬性'scrollIntoViewIfNeeded'在類型'HTMLElement'.上不存在，我無法建立我的專案。

const h3Title = ref<HTMLElement | null>(null)

function nextStep(
  currentStep.value++;
  
  if (h3Title.value) {
    h3Title.value.scrollIntoViewIfNeeded({behavior: "smooth", block: "start"})
  }

Answer 1

我認為 h3Title.value.scrollIntoView({block: "nearest"}) 使用標準的scrollIntoView屬性可以實現你想要的（如果元素已經在視圖中則不滾動）。

如果您確實希望打字稿識別非標準的scrollIntoViewIfNeeded屬性，您可以將其新增至HTMLElement介面（或建立擴充HTMLElement的新介面）：

// global.d.ts
interface HTMLElement {
  scrollIntoViewIfNeeded?: any;
}

或：將 h3Title.value 轉換為 any 類型

(h3Title.value as any).scrollIntoViewIfNeeded()