有没有办法检测HTML元素何时从视图中隐藏?

我不确定是否有一种方法可以检测窗口是否在元素上方,或者窗口是否最小化(尽管我认为您可以通过将某个对象连接到窗口的模糊中来实现后者)?我不确定。无论如何,就滚动而言,这部分问题之前已经被问过几次了, and this is the quick demo 我想出了一个方法来演示如何做。在这个例子中,当元素被滚动到视图中时会发生一些事情,但是逻辑当然是相同的。总之,代码是:

$(document).ready(function() {
    function isScrolledIntoView(elem) {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
    }

    var myelement = $('#formcontainer');
    var mymessage = $('#mymessage');
    $(window).scroll(function() {
        if(isScrolledIntoView(myelement)) {
            mymessage.hide();
        } else {
            mymessage.show();
        }
    });
});

window.addEventListener('load', function() {
    function isScrolledIntoView(elem) {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
    }

    var el = document.getElementById('myelement');
    window.addEventListener('scroll', function() {
        if(isScrolledIntoView(el)) {
            // do something when element is scrolled into view
        } else {
            // do something when it is not in view
        }
    }, false);
}, false);