javascript - How to determine whether an element has scrolled to the bottom of the visible area of ​​the screen?

Question

An element was originally located above the bottom of the visible area of ​​the screen. When the scroll bar scrolled up, the element touched the bottom of the screen. I want to trigger a function when the element touches the bottom of the screen. So how can I capture the element? What about touching the bottom of the screen?

Answer 1

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

The element turns red when it touches the bottom, otherwise it turns white

    <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

You can get the current scrollTop and the clientTop of the element through the js box model, and then make a judgment when the height of the box is known.

Answer 3

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