Есть ли способ определить, когда элемент HTML скрыт от просмотра?

Question

Используя Javascript, можно ли определить, когда определенный элемент больше не виден, например, когда пользователь прокручивает страницу достаточно далеко или когда браузер свернут или закрыт другим окном? Общая цель состоит в том, чтобы поменять рекламу, только если текущая реклама не видна пользователю.

Одна идея состояла бы в том, чтобы очень простой невидимый Java-апплет связывался со страницей каждый раз, когда вызывается метод 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);