Search code examples
javascripthtmlcsscss-animationslazy-loading

JS ScrollIntoView problem when page has img loading lazy + css animations

I have a problem when my page is long with many <img loading="lazy"> + some css animations (like AOS JS) revealing on scroll.

So if I want to use element.scrollIntoView() then the page scrolls to a position that's upper than required element. I guess it's because of loading="lazy" and perhaps due to css animations on scroll.

I tried to get position Y of my element but it always changes as I scroll the page until that element.

Is it possible to fix it? Thanks in advance!

Solution

  • Yes, AOS.JS is actually moving the element in a different position when it's not revealed.

    I've encountered this once and I've did a quick-hack (don't take this as a best-practise) - I've created another invisible element (which didn't have the lazy and AOS effects) on the position where the revealed element should be and then I scrolled onto the invisible element.