Как реализовать событие onVisible в Javascript?

Есть ли какой-либо метод или набор методов, которые могут использоваться для реализации того, что, по сути, было бы событием onVisible в JavaScript?

Я бы хотел, чтобы мой JavaScript обнаружил, когда элемент веб-страницы, такой как абзац текста или изображение, становится видимым в окне браузера, когда пользователь прокручивает страницу вниз. Я также хотел бы, чтобы соответствующее "событие", onNotVisible, срабатывало, когда элемент, который был однажды видимым в окне браузера, больше не может быть замечен.

Если его невозможно легко реализовать в JavaScript, существуют ли какие-либо события, специфичные для браузера, которые могут предоставлять одинаковые функции?

ОТВЕТЫ

Ответ 1

Мне пришлось попробовать это сам, и вот что я придумал:

<!DOCTYPE html>
<html>
<head>
<script>

var EventListener = function(element, callback) {
    this._el = element;
    this._cb = callback;
    this._at = false;
    this._hasBeenVisible = false;
    this._hasBeenInvisible = true;
    var  _me = this;

    window.onscroll = function() {
        for (q in EventListener.queue.onvisible) {
            EventListener.queue.onvisible[q].call();
        }
        for (q in EventListener.queue.oninvisible) {
            EventListener.queue.oninvisible[q].call();
        }
    };

    return {
        onvisible: function() {
            EventListener.queue.onvisible.push(function() {
                if (!_me._at && _me._hasBeenInvisible && (window.pageYOffset + window.innerHeight) > _me._el.offsetTop && window.pageYOffset < (_me._el.offsetTop + _me._el.scrollHeight)) {
                    _me._cb.call();
                    _me._at = true;
                    _me._hasBeenVisible = true;
                }
            });
            EventListener.queue.oninvisible.push(function() {
                if (_me._hasBeenVisible && ((window.pageYOffset + window.innerHeight) < _me._el.offsetTop || window.pageYOffset > (_me._el.offsetTop + _me._el.scrollHeight))) {
                    _me._hasBeenInvisible = true;
                    _me._hasBeenVisible   = false;
                    _me._at = false;
                }
            });
        },
        oninvisible: function() {
            EventListener.queue.oninvisible.push(function() {
                if (!_me._at && _me._hasBeenVisible && ((window.pageYOffset + window.innerHeight) < _me._el.offsetTop || window.pageYOffset > (_me._el.offsetTop + _me._el.scrollHeight))) {
                    _me._cb.call();
                    _me._at = true;
                    _me._hasBeenInvisible = true;
                }
            });
            EventListener.queue.onvisible.push(function() {
                if (_me._hasBeenInvisible && (window.pageYOffset + window.innerHeight) > _me._el.offsetTop && window.pageYOffset < (_me._el.offsetTop + _me._el.scrollHeight)) {
                    _me._hasBeenVisible = true;
                    _me._hasBeenInvisible = false;
                    _me._at = false;
                }
            });
        }
    };
}
EventListener.queue = {
    onvisible:   [],
    oninvisible: []
};

function addListener(element, event, fn) {
    if (typeof element == 'string')
        element = document.getElementById(element);

    var listener = new EventListener(element, fn);

    if (listener['on' + event.toLowerCase()])
        return listener['on' + event.toLowerCase()].call();
}

window.onload = function() {
    addListener('event-element', 'visible', function() {
        alert("Element One Visible!");
    });
    addListener('event-element', 'invisible', function() {
        alert("Element One Invisible!");
    });
    addListener('event2-element', 'visible', function() {
        alert("Element Two Visible!");
    });
    addListener('event2-element', 'invisible', function() {
        alert("Element Two Invisible");
    });
}

</script>
</head>
<body>

<h1>Hey!</h1>

<div style="height: 1500px;">
Please scroll down some pixels.
</div>

<p id="event-element">
    This element should cast an event 'onvisible' and 'oninvisible'.
</p>

<div style="height: 1000px;">

</div>

<p id="event2-element">
    Another one!
</p>


</body>
</html>

Протестировано:

  • FireFox 3.6 (работает)
  • Chrome 6.0.472 (работает)
  • Opera 10.62 (работает)
  • Safari 4 (работает очень плохо и раздражающий способ, не используйте всплывающие окна, если вы попробуете здесь!)

(Код также доступен в PasteBin)

Вышеприведенный код никоим образом не оптимизирован, я только начал писать и заканчивался, когда он работал. Предпочтительно, вы, вероятно, захотите использовать только одну очередь, реорганизовать некоторый код и сделать его более общим. Предоставляется как есть.

Ответ 2

Вам нужно будет настроить прослушиватель событий для события на экране документа или окна. Затем вы будете измерять видимую область в настоящее время, добавляя clientHeight для scrollTop, а затем проверяете, находится ли ваш элемент выбора в этой области. Что-то вроде этого

myElem=document.getElementById('some_id');
scrollOffset=document.getElementsByTagName('html')[0].scrollTop;
visibleHeight=document.getElementsByTagName('html')[0].clientHeight;
if(myElem.offsetTop>=scrollOffset && myElem.offsetTop<=scrollOffset+visibleHeight){
    // element is in visible area
}

Если в этом случае вы устанавливаете некоторый флаг где-то в своем коде.

Однако вы, вероятно, столкнетесь с несовместимостью браузера. Поэтому лучше используйте некоторую библиотеку.

Ответ 3

Один из ответов в question, связанный выше, by @edbond дает указатель на jQuery появится плагин. Этот плагин позволяет присоединить обратные вызовы appear и disappear к элементу, который вызывается как элемент, прокручиваемый в или из вида, который звучит точно так, как вы ищите.