javascript - Comment déterminer si un élément a défilé vers le bas de la zone visible de l'écran?

Question

Un élément était à l'origine situé au-dessus du bas de la zone visible de l'écran. Lorsque la barre de défilement défilait vers le haut, cet élément touchait le bas de l'écran. Je souhaite déclencher une fonction lorsque l'élément touche le bas de l'écran. . Alors, comment puis-je capturer lorsque l'élément touche le bas de l'écran ?

Answer 1

<p class="element" style="height: 100px;width:100px; border:1px solid;margin-top:500px"></p>

L'élément devient rouge lorsqu'il touche le fond, sinon il devient blanc

    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script>
        var element = $('.element');
        var win = $(window);
        win.scroll(function() {
            if (element.offset().top + element.height() <= win.height() + win.scrollTop()) {
                element.css('backgroundColor', '#f33');
            } else {
                element.css('backgroundColor', '#fff');
            }
        })
    </script>

Answer 2

Vous pouvez obtenir le scrollTop actuel et le clientTop de l'élément via le modèle de boîte js, puis porter un jugement lorsque la hauteur de la boîte est connue.

Answer 3

document.addEventListener('scroll', function () {
    var p = document.getElementById('p')
    if (document.body.scrollTop === p.offsetTop) {
        //...
    }
})