Есть ли способ узнать, находится ли пользователь на определенном заголовке, абзаце или div и т.д.

Я пытался найти способ запуска анимации только в том случае, если пользователь находится на ней, сначала я пытался получить размер экрана, и это работает, но это не оптимальное решение. Погуглив, я нашел кое-что, где мы можем получить ID (по тегу ID) во время прокрутки, если каким-то образом я смогу получить ID во время прокрутки вниз, я смогу использовать простую функцию JavaScript для воспроизведения анимации. Есть ли какой-нибудь способ?

Хорошо, я нашел это сам. Что я пытался сделать? Я хотел запустить анимацию (панель навыков) только тогда, когда пользователь видит ее/на ней/передал предыдущую информацию. Я сделал это с помощью JavaScript, а затем запустил анимацию, когда пользователь находится на ней.

ПРИМЕР (извините за беспорядочный код, я не знаю, как выровнять код здесь) 

 <section id="name">
        <div class="hello">
<h1>Hello world</h1>
</div>
    </section>
    
        <section id="aboutMe">
        <div class="hello">
<h1>Hello world</h1>
</div>
    </section>
    
        <section id="skills">
        <div class="hello">
             <h1>these are my skills</h1>
</div>
    </section>

JAVASCRIPT:

     var element = document.querySelector("#skills");
    
    function isInViewPort(element) {
    // Get the bounding client rectangle position in the viewport
    var bounding = element.getBoundingClientRect();

    // Checking part. Here the code checks if it's *fully* visible
    // Edit this part if you just want a partial visibility
    if (
        bounding.top >= 0 &&
        bounding.left >= 0 &&
        bounding.right <= (window.innerWidth || document.documentElement.clientWidth) &&
        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight)
    ) {
        return true;
    } else {
        return false;
    }
}

    var element = document.querySelector("#skills");
    
    if (isInViewPort(element)) {
        alert('true')
    }

надеюсь, это поможет кому-то в будущем

Вернуться на верх