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

Question

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

一个想法是每次调用paint()方法时都有一个非常简单,不可见的Java Applet与页面进行通信.我很确定这会有效,但我想尽可能避免使用applet.

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