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

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

Одна из идей состоит в том, чтобы очень простой, невидимый Java-апплет взаимодействовал со страницей каждый раз, когда вызывается метод paint(). Я почти уверен, что это сработает, но я бы хотел по возможности избегать использования апплетов.


applet javascript
person Outlaw Programmer    schedule 20.04.2009    source источник
comment
Вот два дубликата: stackoverflow .com/questions/588719/, stackoverflow.com/questions/625143/   -  person Paolo Bergantino    schedule 20.04.2009
comment
Однако я не думаю, что это точная копия, поскольку вопросы и мой код охватывают только событие прокрутки. Я не уверен, есть ли способ обнаружить свернутые окна или что-то в этом роде.   -  person Paolo Bergantino    schedule 20.04.2009

Ответы (1)


arrow_upward
6
arrow_downward

Я не уверен, есть ли способ определить, находится ли окно над элементом или окно свернуто (хотя я думаю, что вы можете сделать последнее, подключив что-то к размытию окна? Я не уверен. ..). В любом случае, что касается прокрутки, эта часть вопроса уже задавалась несколько раз, и это это быстрая демонстрация, которую я придумал, чтобы показать, как это сделать. В примере что-то происходит, когда элемент прокручивается в поле зрения, но логика, конечно, та же. Во всяком случае, код:

$(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);
person Paolo Bergantino    schedule 20.04.2009
comment
Хорошо, спасибо. Я пытался искать как на этом сайте, так и в Google в целом, но мне было трудно сформулировать, что именно я хотел сделать. Если у вас есть ссылка на исходный вопрос, я могу закрыть этот вопрос. - person Outlaw Programmer; 20.04.2009