Unable to use scrollIntoView correctly because of lazy loaded components

Question

Im having an issue using .scrollIntoView which I suspect is due to lazy loaded components. When the page is scrolling down these lazy loaded components are loaded and increase the page height, changing the position of the element I want to scroll into view.

Is there any way to deal with this without changing the way the lazy loaded components are loaded?

The code I'm using is pretty basic

this.goToPageElement('#page-anchor', 'center');

goToPageElement(element, position) {
    const target = document.querySelector(element);
    target.scrollIntoView({
      behavior: 'smooth',
      block: position,
    });
  }

Answer 1

For anyone facing this issue, we solved it by adding static heights to the lazyLoaded component wrapper. For components with variable height I had to choose an average height, and then change heights based on screen size. This is very easily done with Tailwinds one off classes.

<LazyLoaded class="h-[400px] lg:h-[250px]">