如何在Javascript中实现'onVisible'事件？ [英] How to implement an 'onVisible' event in Javascript?
问题描述
是否有任何技术或一组技术可以用来实现什么，实际上，这将是JavaScript中的onVisible'event'？
我想我的JavaScript用于检测网页中的元素（如文本段落或图像）在用户向下滚动页面时何时在浏览器窗口中可见。如果浏览器窗口中一次可见的元素无法再被看到，我还想要一个相应的'event'onNotVisible来触发。
如果它不能被看到很容易在JavaScript中实现，有没有可以提供相同功能的浏览器特定事件？这是我想出来的：
<！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;
$ b $ 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（）;
}
};
$ b返回{
onvisible：function（）{
EventListener.queue.onvisible.push（function（）{
if（！_me._at&& _me._hasBeenInvisible&&& amp;（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& amp; amp; _me._hasBeenVisible& amp; ;&（（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：[]
};
函数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（）]。
$ b $ window.onload = function（）{
addListener（'event-element'，'visible'，function（）{
alert（Element One可见！）;
}）;
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>嘿！< / h1>
< div style =height：1500px;>
请向下滚动一些像素。
< / div>
< p id =event-element>
此元素应该投射不可见和不可见事件。
< / p>
< div style =height：1000px;>
< / div>
< p id =event2-element>
另一个！
< / p>
< / body>
< / html>
测试：
的烦人方式，如果您在此尝试
，请不要使用弹出窗口！）
（此代码也可在PasteBin 中找到）
上面的代码没有以任何方式进行优化，我刚开始编写并在其工作时结束。最好你可能只想使用一个队列，重构一些代码并使其更通用。按原样提供。
Is there any technique or set of techniques that can be used to implement what, in effect, would be an onVisible 'event' in JavaScript?
I would like my JavaScript to detect when an element in a web page, such as a paragraph of text, or an image, becomes visible in a browser window as a user scrolls down a page. I would also like a corresponding 'event', onNotVisible, to fire when an element that was once visible in the browser window can no longer be seen.
If it cannot be easily implemented in JavaScript, are there any browser specific events that can provide the same functionality?
I had to try this myself, and this is what I came up with:
<!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>
Tested in:
- FireFox 3.6 (works)
- Chrome 6.0.472 (works)
- Opera 10.62 (works)
- Safari 4 (Works in a very buggy and irritating way, don't use popups if you try it here!)
(The code is also available on PasteBin)
The above code is not optimized in any way, I just started writing and ended when it worked. Preferrably you would probably want to use only one queue, refactor some code and make it more generic. Provided as is.
这篇关于如何在Javascript中实现'onVisible'事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
