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

Question

使用 Javascript，是否可以检测某个元素何时不再可见，例如当用户向下滚动足够远或浏览器最小化或被另一个窗口覆盖时？ 总体目标是仅当当前广告对用户不可见时才替换广告。

一种想法是让一个非常简单、不可见的 Java Applet 在每次调用 Paint() 方法时与页面进行通信。 我很确定这会起作用，但我想如果可能的话避免使用小程序。

Answer 1

我不确定是否有办法检测窗口是否位于元素上方或者窗口是否最小化（尽管我认为您可以通过将某些东西挂接到窗口的模糊中来完成后者？我不确定。 ..)。 无论如何，就滚动而言，这部分问题之前已被问过几次， 是我想出的快速演示，用于展示如何做到这一点。 在示例中，当元素滚动到视图中时会发生一些事情，但逻辑当然是相同的。 不管怎样，代码是：

$(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();
        }
    });
});

没有太多 jQuery 特定的内容，所以你可以把这些东西拿出来：

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);