CODEWITHSUNDEEP
htmlangularscroll
travis_911
travis_911

Reputation: 321

scrollIntoView doesn't move to the element

I'm using the scrollIntoView to move to a element that has a proper index. It doesn't scroll and remain in the same position

 scrollToNextQuestion(indexCard, indexQuestion): void {

  const htmlRef = document.getElementById('lazyAccordionTab-' + indexQuestion);
  console.log('htmlRef --> ', htmlRef);
  try {
    htmlRef.scrollIntoView({behavior: 'smooth', block: 'start'});
    this.cdRef.detectChanges();
  } catch (err) {
  }

}

I pass the index in which I want to scroll. But doesn't work. The structure of html is here

enter image description here

What can be the problem?

the element where I want to go printed

enter image description here

EDITED

const htmlRef = document.getElementById('accordionTab-'+indiceTabScheda).querySelector('[role="tablist"]').querySelector('#lazyAccordionTab-'+indiceDomanda).lastElementChild;

I replaced this piece of code

Upvotes: 0

Views: 429

Answers (1)

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17610

Can you try something like that?

var topOfElement = document.querySelector('#lazyAccordionTab-'+ indexQuestion).getBoundingClientRect().top;
window.scroll({ top: topOfElement, behavior: "smooth" });

Upvotes: 2

Related Questions