有没有一种有效的方法来判断 DOM 元素（在 HTML 文档中）当前是否可见（出现在视口中）？
（问题是指 Firefox。）
如何判断 DOM 元素在当前视口中是否可见？
IT技术
javascript
html
firefox
dom
browser
2020-12-22 15:44:30
6个回答
现在大多数浏览器都支持getBoundingClientRect方法，这已成为最佳实践。使用旧答案非常慢，不准确并且有几个错误。
选择为正确的解决方案几乎从不精确。
此解决方案已在 Internet Explorer 7（及更高版本）、iOS 5（及更高版本）Safari、Android 2.0 (Eclair) 及更高版本、BlackBerry、Opera Mobile 和 Internet Explorer Mobile 9 上进行了测试。
function isElementInViewport (el) {
// Special bonus for those using jQuery
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /* or $(window).height() */
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /* or $(window).width() */
);
}
如何使用：
您可以确定上面给出的函数在调用时返回正确的答案，但是跟踪元素作为事件的可见性呢？
将以下代码放在<body>标签底部：
function onVisibilityChange(el, callback) {
var old_visible;
return function () {
var visible = isElementInViewport(el);
if (visible != old_visible) {
old_visible = visible;
if (typeof callback == 'function') {
callback();
}
}
}
}
var handler = onVisibilityChange(el, function() {
/* Your code go here */
});
// jQuery
$(window).on('DOMContentLoaded load resize scroll', handler);
/* // Non-jQuery
if (window.addEventListener) {
addEventListener('DOMContentLoaded', handler, false);
addEventListener('load', handler, false);
addEventListener('scroll', handler, false);
addEventListener('resize', handler, false);
} else if (window.attachEvent) {
attachEvent('onDOMContentLoaded', handler); // Internet Explorer 9+ :(
attachEvent('onload', handler);
attachEvent('onscroll', handler);
attachEvent('onresize', handler);
}
*/
如果您进行任何 DOM 修改，它们当然可以更改您元素的可见性。
准则和常见陷阱：
也许您需要跟踪页面缩放/移动设备捏合？jQuery 应该处理缩放/捏跨浏览器，否则第一个或第二个链接应该可以帮助您。
如果你修改 DOM，它会影响元素的可见性。您应该控制它并handler()手动调用。不幸的是，我们没有任何跨浏览器onrepaint事件。另一方面，它允许我们进行优化并仅对可以更改元素可见性的 DOM 修改执行重新检查。
永远不要只在 jQuery $(document).ready() 中使用它，因为此时没有保证 CSS 已被应用。您的代码可以在本地与硬盘驱动器上的 CSS 一起使用，但是一旦放在远程服务器上，它就会失败。
之后DOMContentLoaded被解雇，样式应用于，但图像尚未加载。所以，我们应该添加window.onload事件监听器。
我们还不能捕捉缩放/捏合事件。
最后的手段可能是以下代码：
/* TODO: this looks like a very bad code */
setInterval(handler, 600);
如果您关心网页选项卡是否处于活动状态和可见性，您可以使用HTML5 API的强大功能pageVisibiliy。
TODO：此方法不处理两种情况：
- 重叠使用
z-index。 - 使用
overflow-scroll位于元素的容器。 - 尝试新事物 - Intersection Observer API 解释。
更新：时间在前进，我们的浏览器也在前进。不再推荐使用此技术，如果您不需要支持 Internet Explorer 7 之前的版本，则应使用Dan 的解决方案。
原始解决方案（现已过时）：
这将检查元素是否在当前视口中完全可见：
function elementInViewport(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 &&
left >= window.pageXOffset &&
(top + height) <= (window.pageYOffset + window.innerHeight) &&
(left + width) <= (window.pageXOffset + window.innerWidth)
);
}
您可以简单地修改它以确定元素的任何部分是否在视口中可见：
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
);
}
更新
在现代浏览器中，您可能需要查看Intersection Observer API，它具有以下优点：
- 比监听滚动事件更好的性能
- 适用于跨域 iframe
- 可以判断一个元素是否阻碍/与另一个元素相交
Intersection Observer 正在成为一个成熟的标准，并且已经在 Chrome 51+、Edge 15+ 和 Firefox 55+ 中得到支持，并且正在为 Safari 开发。还有一个polyfill可用。
上一个答案
Dan 提供的答案存在一些问题，可能使其成为某些情况下不合适的方法。他在底部附近的回答中指出了其中一些问题，他的代码将对以下元素给出误报：
- 被测试对象前面的另一个元素隐藏
- 在父元素或祖先元素的可见区域之外
- 使用 CSS
clip属性隐藏的元素或其子元素
以下简单测试的结果证明了这些限制：
解决方案： isElementVisible()
下面是这些问题的解决方案，下面是测试结果和部分代码的解释。
function isElementVisible(el) {
var rect = el.getBoundingClientRect(),
vWidth = window.innerWidth || document.documentElement.clientWidth,
vHeight = window.innerHeight || document.documentElement.clientHeight,
efp = function (x, y) { return document.elementFromPoint(x, y) };
// Return false if it's not in the viewport
if (rect.right < 0 || rect.bottom < 0
|| rect.left > vWidth || rect.top > vHeight)
return false;
// Return true if any of its four corners are visible
return (
el.contains(efp(rect.left, rect.top))
|| el.contains(efp(rect.right, rect.top))
|| el.contains(efp(rect.right, rect.bottom))
|| el.contains(efp(rect.left, rect.bottom))
);
}
通过测试： http : //jsfiddle.net/AndyE/cAY8c/
结果：
补充说明
然而，这种方法并非没有其自身的局限性。例如，即使前面的元素实际上没有隐藏它的任何部分，一个被测试的元素的 z-index 比同一位置的另一个元素低，也会被识别为隐藏。尽管如此，这种方法在丹的解决方案未涵盖的某些情况下仍有其用途。
两者element.getBoundingClientRect()并document.elementFromPoint()是CSSOM工作草案规范的一部分，并且在至少IE 6和更高的支持和最长一段时间的桌面浏览器（尽管，不完全）。有关更多信息，请参阅有关这些功能的 Quirksmode。
contains()用于查看返回document.elementFromPoint()的元素是否是我们正在测试可见性的元素的子节点。如果返回的元素是相同的元素，它也会返回 true。这只会使检查更加稳健。所有主要浏览器都支持它，Firefox 9.0 是最后一个添加它的浏览器。对于较旧的 Firefox 支持，请查看此答案的历史记录。
如果您想在元素周围测试更多点的可见性——即，确保元素没有被超过 50% 覆盖——调整答案的最后部分不需要太多。但是，请注意，如果您检查每个像素以确保它 100% 可见，它可能会非常慢。
我尝试了丹的回答，但是，用于确定边界的代数意味着元素必须≤视口大小并且完全在视口内才能得到true，这很容易导致误报。如果你想确定一个元素是否在视口中，ryanve 的答案很接近，但被测试的元素应该与视口重叠，所以试试这个：
function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
return rect.bottom > 0 &&
rect.right > 0 &&
rect.left < (window.innerWidth || document.documentElement.clientWidth) /* or $(window).width() */ &&
rect.top < (window.innerHeight || document.documentElement.clientHeight) /* or $(window).height() */;
}
作为一项公共服务：
Dan 的答案具有正确的计算（元素可以是 > 窗口，尤其是在手机屏幕上）和正确的 jQuery 测试，以及添加 isElementPartiallyInViewport：
顺便说一下，window.innerWidth 和 document.documentElement.clientWidth的区别在于 clientWidth/clientHeight 不包含滚动条，而 window.innerWidth/Height 包含。
function isElementPartiallyInViewport(el)
{
// Special bonus for those using jQuery
if (typeof jQuery !== 'undefined' && el instanceof jQuery)
el = el[0];
var rect = el.getBoundingClientRect();
// DOMRect { x: 8, y: 8, width: 100, height: 100, top: 8, right: 108, bottom: 108, left: 8 }
var windowHeight = (window.innerHeight || document.documentElement.clientHeight);
var windowWidth = (window.innerWidth || document.documentElement.clientWidth);
// http://stackoverflow.com/questions/325933/determine-whether-two-date-ranges-overlap
var vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0);
var horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0);
return (vertInView && horInView);
}
// http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
function isElementInViewport (el)
{
// Special bonus for those using jQuery
if (typeof jQuery !== 'undefined' && el instanceof jQuery)
el = el[0];
var rect = el.getBoundingClientRect();
var windowHeight = (window.innerHeight || document.documentElement.clientHeight);
var windowWidth = (window.innerWidth || document.documentElement.clientWidth);
return (
(rect.left >= 0)
&& (rect.top >= 0)
&& ((rect.left + rect.width) <= windowWidth)
&& ((rect.top + rect.height) <= windowHeight)
);
}
function fnIsVis(ele)
{
var inVpFull = isElementInViewport(ele);
var inVpPartial = isElementPartiallyInViewport(ele);
console.clear();
console.log("Fully in viewport: " + inVpFull);
console.log("Partially in viewport: " + inVpPartial);
}
测试用例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Test</title>
<!--
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="scrollMonitor.js"></script>
-->
<script type="text/javascript">
function isElementPartiallyInViewport(el)
{
// Special bonus for those using jQuery
if (typeof jQuery !== 'undefined' && el instanceof jQuery)
el = el[0];
var rect = el.getBoundingClientRect();
// DOMRect { x: 8, y: 8, width: 100, height: 100, top: 8, right: 108, bottom: 108, left: 8 }
var windowHeight = (window.innerHeight || document.documentElement.clientHeight);
var windowWidth = (window.innerWidth || document.documentElement.clientWidth);
// http://stackoverflow.com/questions/325933/determine-whether-two-date-ranges-overlap
var vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0);
var horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0);
return (vertInView && horInView);
}
// http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
function isElementInViewport (el)
{
// Special bonus for those using jQuery
if (typeof jQuery !== 'undefined' && el instanceof jQuery)
el = el[0];
var rect = el.getBoundingClientRect();
var windowHeight = (window.innerHeight || document.documentElement.clientHeight);
var windowWidth = (window.innerWidth || document.documentElement.clientWidth);
return (
(rect.left >= 0)
&& (rect.top >= 0)
&& ((rect.left + rect.width) <= windowWidth)
&& ((rect.top + rect.height) <= windowHeight)
);
}
function fnIsVis(ele)
{
var inVpFull = isElementInViewport(ele);
var inVpPartial = isElementPartiallyInViewport(ele);
console.clear();
console.log("Fully in viewport: " + inVpFull);
console.log("Partially in viewport: " + inVpPartial);
}
// var scrollLeft = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft,
// var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
</script>
</head>
<body>
<div style="display: block; width: 2000px; height: 10000px; background-color: green;">
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<input type="button" onclick="fnIsVis(document.getElementById('myele'));" value="det" />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<div style="background-color: crimson; display: inline-block; width: 800px; height: 500px;" ></div>
<div id="myele" onclick="fnIsVis(this);" style="display: inline-block; width: 100px; height: 100px; background-color: hotpink;">
t
</div>
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<input type="button" onclick="fnIsVis(document.getElementById('myele'));" value="det" />
</div>
<!--
<script type="text/javascript">
var element = document.getElementById("myele");
var watcher = scrollMonitor.create(element);
watcher.lock();
watcher.stateChange(function() {
console.log("state changed");
// $(element).toggleClass('fixed', this.isAboveViewport)
});
</script>
-->
</body>
</html>