CODEWITHSUNDEEP
typescriptvue.jsvuejs3typescript-generics
Alexandru Cristian
Alexandru Cristian

Reputation: 450

How to fix error TS2339 - property does not exist on 'HTMLElement'

When I press the "next" button, which triggers the code below, the desired action is performed (scrolling to my element if needed).

But this error apears: error TS2339: Property 'scrollIntoViewIfNeeded' does not exist on type 'HTMLElement'. and i can't build my project.

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

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

Upvotes: 2

Views: 2066

Answers (1)

yoduh
yoduh

Reputation: 14659

I think h3Title.value.scrollIntoView({block: "nearest"}) would achieve what you want (no scrolling if element is already in view) using the standard scrollIntoView property.

If you really want typescript to recognize the non-standard scrollIntoViewIfNeeded property you can add it to the HTMLElement interface (or make new interface extending HTMLElement):

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

Alternatively: cast h3Title.value as type any

(h3Title.value as any).scrollIntoViewIfNeeded()

Upvotes: 4

Related Questions