Comment mettre en œuvre un " onVisible en Javascript?

Est-il une technique ou un ensemble de techniques qui peuvent être utilisées pour mettre en œuvre ce, en effet, serait un onVisible '"événement" en JavaScript?

Je voudrais que mon JavaScript pour détecter quand un élément dans une page web, comme un paragraphe de texte, ou une image, devient visible dans la fenêtre du navigateur comme un utilisateur fait défiler une page. Je voudrais également une correspondant '"événement", onNotVisible, qui se déclenche quand un élément qui a été une fois visible dans la fenêtre du navigateur ne peut plus être considérée.

Si elle ne peut pas être facilement mis en œuvre en JavaScript, il y a n'importe quel navigateur d'événements spécifiques qui peuvent fournir les mêmes fonctionnalités?

InformationsquelleAutor RobertG | 2010-09-27
  1. 8

    Je devais l'essayer moi-même, et c'est ce que je suis venu avec:

    <!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>

    Testé dans:

    • FireFox 3.6 (travaux)
    • Chrome 6.0.472 (travaux)
    • Opéra 10.62 (travaux)
    • Safari 4 (Travaille dans un buggy et
      irritant, n'utilisez pas les popups si
      vous essayez ici!)

    (Le code est également disponible sur PasteBin)

    Le code ci-dessus n'est pas optimisé en quelque sorte, j'ai simplement commencé à écrire, et s'est terminé quand il a travaillé. De préférence, vous souhaiterez probablement utiliser une seule file d'attente, refactoriser le code et de le rendre plus générique. Fourni en l'état.

    • la bonne réponse. Cela ne tient pas compte de l'attribut d'affichage si! On va avoir besoin de traverser l'élément parentNode et vérifier si tous les attributs d'affichage sont visibles. Très utile pour les contenus à la demande de chargement.
    • Ici, il est sur jsbin: jsbin.com/ewoqey/1/edit
    InformationsquelleAutor Björn
  2. 5

    Vous devez définir un écouteur d'événement pour le document ou de la fenêtre de l'événement onscroll. Alors vous feriez mesure actuellement visible de la zone par l'ajout de la clientHeight à scrollTop, puis vous vérifiez si votre élément de choix est à l'intérieur de cette zone. Quelque chose comme ceci

    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
}

    Si c'est le cas, vous définissez certaines drapeau quelque part dans votre code.

    Vous êtes probablement à des incompatibilités entre navigateurs, il y bien que. Donc mieux vaut utiliser une bibliothèque.

    • Comment puis-je vérifier si un élément de choix dans ce domaine?
    • J'ai ajouté un exemple.
    InformationsquelleAutor DanMan
  3. 4

    L'un des réponses dans le question lié ci-dessus par @edbond renvoie un pointeur sur le jQuery apparaissent plugin. Ce plugin vous permet de fixer appear et disappear rappels à un élément que l'on appelle l'élément défile dans et hors de la vue, qui ressemble exactement à ce que vous recherchez.

    InformationsquelleAutor David Hull