如何实施'；onVisible'；Javascript中的事件？
是否有任何技术或一组技术可以用来实现JavaScript中的onVisible“事件” 我希望我的JavaScript能够检测当用户向下滚动页面时，网页中的元素（如文本段落或图像）何时在浏览器窗口中可见。我还希望在浏览器窗口中曾经可见的元素不再可见时触发相应的“事件”，onNotVisible如何实施'；onVisible'；Javascript中的事件？,javascript,html,javascript-events,Javascript,Html,Javascript Events,是否有任何技术或一组技术可以用来实现JavaScript中的onVisible“事件” 我希望我的JavaScript能够检测当用户向下滚动页面时，网页中的元素（如文本段落或图像）何时在浏览器窗口中可见。我还希望在浏览器窗口中曾经可见的元素不再可见时触发相应的“事件”，onNotVisible 如果无法在JavaScript中轻松实现，是否有任何特定于浏览器的事件可以提供相同的功能？您必须为文档或窗口的onscroll事件设置事件侦听器。然后通过将clientHeight添加到scrollTop
如果无法在JavaScript中轻松实现，是否有任何特定于浏览器的事件可以提供相同的功能？您必须为文档或窗口的onscroll事件设置事件侦听器。然后通过将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
}
myElem=document.getElementById（'some_id'）；
scrollOffset=document.getElementsByTagName（'html'）[0].scrollTop；
visibleHeight=document.getElementsByTagName（'html'）[0].clientHeight；
如果（myElem.offsetTop>=scrollOffset&&myElem.offsetTop我必须亲自尝试，这就是我想到的：
<!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>
var EventListener=函数（元素，回调）{
这一点。_el=元素；
这个。_cb=回调；
这个。_at=false；
这个。_hasBeenVisible=false；
这._hasbeinvisible=true；
var _me=这个；
window.onscroll=函数（）{
for（EventListener.queue.onvisible中的q）{
EventListener.queue.onvisible[q].call（）；
}
for（EventListener.queue.oninvisible中的q）{
EventListener.queue.oninvisible[q].call（）；
}
};
返回{
onvisible:function（）{
EventListener.queue.onvisible.push（函数（）{
如果（！\u me.\u at&&u me.\u已不可见&&（window.pageYOffset+window.innerHeight）>\u me.\u el.offsetTop&&window.pageYOffset<（\u me.\u el.offsetTop+\u me.\u el.scrollHeight））{
_我；
_我是真的；
_我._hasBeenVisible=真；
}
});
EventListener.queue.oninvisible.push（函数（）{
如果（_me._hasvisible&（（window.pageYOffset+window.innerHeight）<_me._el.offsetTop | | window.pageYOffset>（_me._el.offsetTop+_me._el.scrollHeight）））{
_我._hasbeinvisible=真；
_我._hasBeenVisible=假；
_我是错的；
}
});
},
oninvisible:函数（）{
EventListener.queue.oninvisible.push（函数（）{
如果（！\u me.\u at&&&u me.\u已可见（（window.pageYOffset+window.innerHeight）<\u me.\u el.offsetTop | | window.pageYOffset>（\u me.\u el.offsetTop+\u me.\u el.scrollHeight）））{
_我；
_我是真的；
_我._hasbeinvisible=真；
}
});
EventListener.queue.onvisible.push（函数（）{
如果（\u me.\u已不可见和（window.pageYOffset+window.innerHeight）>\u me.\u el.offsetTop和&window.pageYOffset<（\u me.\u el.offsetTop+\u me.\u el.scrollHeight））{
_我._hasBeenVisible=真；
_我._hasbeinvisible=假；
_我是错的；
}
});
}
};
}
EventListener.queue={
onvisible:[]，
不可见：[]
};
函数addListener（元素、事件、fn）{
if（元素类型=='string'）
元素=document.getElementById（元素）；
var listener=neweventlistener（元素，fn）；
if（侦听器['on'+event.toLowerCase（）]））
返回侦听器['on'+event.toLowerCase（）].call（）；
}
window.onload=函数（）{
addListener（'event-element'，'visible'，function（））{
警报（“元素1可见！”）；
});
addListener（'事件元素'，'不可见'，函数（））{
警报（“元素1不可见！”）；
});
addListener（'event2-element'，'visible'，function（）{
警报（“元素二可见！”）；
});
addListener（'event2-element'，'invisible'，function（）{
警报（“第二要素不可见”）；
});
}
嘿
请向下滚动一些像素。
此元素应强制转换事件“onvisible”和“oninvisible”。
另一个！
测试地点：
- FireFox 3.6（works）
- 铬6.0.472（工程）
- 歌剧10.62（作品）
- Safari 4（工作在一个非常有童车和
恼人的方式，不要使用弹出窗口，如果
你可以在这里试试！）
（）
上面的代码没有以任何方式进行优化，我只是开始编写并在它工作时结束。您可能更希望只使用一个队列，重构一些代码并使其更通用。按原样提供。上面由@edbond链接的其中一个提供了一个指向jQuery的指针。此插件允许您附加显示
和消失
回调一个元素，该元素在滚动进入和退出视图时被调用，这听起来正是您要查找的内容。这可能有助于您了解如何检查所选元素是否在该区域内？答案很好。但这并没有考虑显示属性！您需要向上翻转元素的父节点，检查其所有显示属性是否可见。对于按需加载内容非常有用。