javascript 使用 jquery 检查 div 在视口中是否可见
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20644029/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Checking if a div is visible within viewport using jquery
提问by Die 20
I am trying to use jquery to check if Div RED is within the viewport, and if not, then check if Div ORANGE is in the viewport. The function I am using works great if there is only one IF statement, but when I add another IF ELSE statement, it wont work.
我正在尝试使用 jquery 检查 Div RED 是否在视口中，如果没有，则检查 Div ORANGE 是否在视口中。如果只有一个 IF 语句，我正在使用的函数效果很好，但是当我添加另一个 IF ELSE 语句时，它就不起作用了。
here is the function:
这是功能：
$.fn.isOnScreen = function(){
var win = $(window);
var viewport = {
top : win.scrollTop(),
left : win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();
return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};
here is the code I added to check and see if div red or div orange is within the viewport
这是我添加的代码，用于检查 div red 或 div orange 是否在视口内
$(window).scroll(function() {
if ($('.red').isOnScreen() === true) {
$('.red').remove();
} else if ($('.orange').isOnScreen() === true) {
$('.orange').remove();
}
});
here is a jfiddle http://jsfiddle.net/wN7ah/453/
这是一个 jfiddle http://jsfiddle.net/wN7ah/453/
回答by Ani
Here is the working versions: http://jsfiddle.net/wN7ah/455/
这是工作版本：http: //jsfiddle.net/wN7ah/455/
Function that does the magic:
神奇的功能：
$.fn.isOnScreen = function(){
var win = $(window);
var viewport = {
top : win.scrollTop(),
left : win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();
return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};
Usage:
用法：
$(window).scroll(function() {
if ($('.orange').isOnScreen() == true) {
//alert("removing orange");
$('.orange').remove();
}
if ($('.red').isOnScreen() == true) {
//alert("removing red");
$('.red').remove();
}
});
If any orange or red is present in onscreen it'll remove them.
如果屏幕上出现任何橙色或红色，它将删除它们。
If you want to check when it's removed, add alert before removing: http://jsfiddle.net/wN7ah/457/
如果要检查何时删除，请在删除前添加警报：http: //jsfiddle.net/wN7ah/457/
回答by anjaneyulubatta505
We can do it with pure javascript function like below
我们可以用下面的纯 javascript 函数来完成
function elementInViewport2(el) {
var top = el.offsetTop;
var left = el.offsetLeft;
var width = el.offsetWidth;
var height = el.offsetHeight;
while(el.offsetParent) {
el = el.offsetParent;
top += el.offsetTop;
left += el.offsetLeft;
}
return (
top < (window.pageYOffset + window.innerHeight) &&
left < (window.pageXOffset + window.innerWidth) &&
(top + height) > window.pageYOffset &&
(left + width) > window.pageXOffset
);
}
ele = document.getElementById('visb_true');
console.log("visible: ", elementInViewport2(ele))
ele = document.getElementById('visb_false');
console.log("visible: ", elementInViewport2(ele))#visb_true{
color: green;
font-weight: 800;
}
#visb_false{
color: red;
font-weight: 800;
}<html>
<body>
<p> hello </p>
<p> hello </p>
<p id="visb_true"> hello </p>
<p> hello </p>
<p> hello </p>
<p> hello </p>
<p> hello </p>
<p> hello </p>
<p> hello </p>
<p> hello </p>
<p> hello </p>
<p> hello </p>
<p> hello </p>
<p> hello </p>
<p> hello </p>
<p> hello </p>
<p> hello </p>
<p> hello </p>
<p> hello </p>
<p> hello </p>
<p> hello </p>
<p> hello </p>
<p> hello </p>
<p> hello </p>
<p> hello </p>
<p> hello </p>
<p> hello </p>
<p> hello </p>
<p> hello </p>
<p> hello </p>
<p> hello </p><p> hello </p>
<p id="visb_false"> hello </p>
<p> hello </p>
</body>
</html>