有没有办法检测 HTML 元素何时从视图中隐藏? [英] Is there a way to detect when an HTML element is hidden from view?

问题描述

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

Using Javascript, is it possible to detect when a certain element is no longer visible, such as when the user scrolls down far enough or when the browser is minimized or covered with another window? The overall goal is to swap out an advertisement only when the current ad is not visible to the user.

一个想法是在每次调用paint() 方法时让一个非常简单的、不可见的Java Applet 与页面进行通信.我很确定这会奏效，但我想尽可能避免使用小程序.

One idea would be to have a very simple, invisible Java Applet communicate with the page every time the paint() method is called. I'm pretty sure this would work but I'd like to avoid using applets if possible.

推荐答案

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

I am not sure if there is a way to detect if a window is over the element or if the window is minimized (although I think you may be able to do the latter by hooking something into the window's blur? I'm not sure...). Anyhow, as far as scrolling, that part of the question has been asked a few times before, and this is the quick demo I came up with to show how to do it. In the example something happens when the element is scrolled into view, but the logic is of course the same. Anyhow, the code is:

$(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 的特定内容，因此您可以将其删除:

There's not much jQuery-specific about it so you can take that stuff out:

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

这篇关于有没有办法检测 HTML 元素何时从视图中隐藏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！