javascript - Wie kann festgestellt werden, ob ein Element an den unteren Rand des sichtbaren Bereichs des Bildschirms gescrollt wurde?

Question

Ein Element befand sich ursprünglich über dem unteren Rand des sichtbaren Bereichs des Bildschirms. Als die Bildlaufleiste nach oben scrollte, berührte dieses Element den unteren Rand des Bildschirms . Wie kann ich also erfassen, wenn das Element den unteren Bildschirmrand berührt?

Answer 1

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

元素触底就变红，否则变白色

    <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

可以通过js得盒子模型获取到当前的scrollTop还有元素的clientTop，再已知盒子高度的情况下进行判断。

Answer 3

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