有没有一种有效的方法来判断 DOM 元素（在 HTML 文档中）当前是否可见（出现在视口中）？
（问题指的是 Firefox。）
Itamar Benzaken
问问题
681369 次
30 回答
1590
现在大多数浏览器都支持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 解释。
于 2011-09-26T15:27:32.377 回答
400
更新：时间在进步，我们的浏览器也在进步。不再推荐这种技术，如果您不需要支持 7 之前的 Internet Explorer 版本，您应该使用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
);
}
于 2008-09-24T02:40:09.047 回答
221
更新
在现代浏览器中，您可能需要查看Intersection Observer API，它提供以下好处：
- 比监听滚动事件更好的性能
- 适用于跨域 iframe
- 可以判断一个元素是否阻碍/与另一个元素相交
Intersection Observer 正在成为一个成熟的标准，并且已经在 Chrome 51+、Edge 15+ 和 Firefox 55+ 中得到支持，并且正在为 Safari 开发。还有一个polyfill可用。
上一个答案
Dan 提供的答案存在一些问题，这可能使其不适用于某些情况。他在底部附近的回答中指出了其中一些问题，他的代码将对以下元素给出误报：
- 被正在测试的元素前面的另一个元素隐藏
- 在父元素或祖先元素的可见区域之外
clip使用 CSS属性隐藏的元素或其子元素
这些限制在以下简单测试的结果中得到了证明：
解决方案：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 低于同一位置的另一个元素，即使前面的元素实际上并没有隐藏它的任何部分，它也会被标识为隐藏。尽管如此，这种方法在 Dan 的解决方案未涵盖的某些情况下仍有其用途。
两者都是 CSSOM 工作草案规范的一部分，并且至少在 IE 6 及更高版本以及element.getBoundingClientRect()大多数桌面浏览器中得到了很长时间的支持（尽管并不完美）。有关更多信息，请参阅有关这些功能的 Quirksmode。document.elementFromPoint()
contains()用于查看返回的document.elementFromPoint()元素是否是我们正在测试可见性的元素的子节点。如果返回的元素是相同的元素，它也会返回 true。这只会使检查更加健壮。所有主流浏览器都支持它，Firefox 9.0 是最后一个添加它的浏览器。对于较旧的 Firefox 支持，请查看此答案的历史记录。
如果您想在元素周围测试更多点的可见性——即确保元素不被超过 50% 覆盖——调整答案的最后部分并不需要太多。但是，请注意，如果您检查每个像素以确保其 100% 可见，它可能会非常慢。
于 2013-03-04T14:18:08.580 回答
88
我尝试了Dan 的回答，但是，用于确定边界的代数意味着元素必须既 ≤ 视口大小又完全在视口内才能获取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() */;
}
于 2013-04-29T02:36:20.560 回答
41
作为一项公共服务：
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>
于 2014-09-25T12:54:30.237 回答
37
请参阅使用getBoundingClientRect的verge的来源。就像是：
function inViewport (element) {
if (!element) return false;
if (1 !== element.nodeType) return false;
var html = document.documentElement;
var rect = element.getBoundingClientRect();
return !!rect &&
rect.bottom >= 0 &&
rect.right >= 0 &&
rect.left <= html.clientWidth &&
rect.top <= html.clientHeight;
}
true如果元素的任何部分在视口中，它就会返回。
于 2012-09-14T05:49:34.013 回答
33
我更短更快的版本：
function isElementOutViewport(el){
var rect = el.getBoundingClientRect();
return rect.bottom < 0 || rect.right < 0 || rect.left > window.innerWidth || rect.top > window.innerHeight;
}
和一个需要的 jsFiddle：https ://jsfiddle.net/on1g619L/1/
于 2014-04-23T03:04:03.753 回答
26
我发现没有可用的功能的以jQuery为中心的版本令人不安。当我遇到Dan 的解决方案时，我发现有机会为喜欢以 jQuery OO 风格编程的人们提供一些东西。它既漂亮又活泼，对我来说就像一种魅力。
巴达兵巴达热潮
$.fn.inView = function(){
if(!this.length)
return false;
var rect = this.get(0).getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
// Additional examples for other use cases
// Is true false whether an array of elements are all in view
$.fn.allInView = function(){
var all = [];
this.forEach(function(){
all.push( $(this).inView() );
});
return all.indexOf(false) === -1;
};
// Only the class elements in view
$('.some-class').filter(function(){
return $(this).inView();
});
// Only the class elements not in view
$('.some-class').filter(function(){
return !$(this).inView();
});
用法
$(window).on('scroll',function(){
if( $('footer').inView() ) {
// Do cool stuff
}
});
于 2015-08-02T13:40:44.717 回答
25
新的Intersection Observer API非常直接地解决了这个问题。
这个解决方案需要一个 polyfill，因为 Safari、Opera 和 Internet Explorer 还不支持这个（polyfill 包含在解决方案中）。
在这个解决方案中，有一个看不见的盒子是目标（观察到的）。当它进入视图时，标题顶部的按钮是隐藏的。一旦盒子离开视图，它就会显示出来。
const buttonToHide = document.querySelector('button');
const hideWhenBoxInView = new IntersectionObserver((entries) => {
if (entries[0].intersectionRatio <= 0) { // If not in view
buttonToHide.style.display = "inherit";
} else {
buttonToHide.style.display = "none";
}
});
hideWhenBoxInView.observe(document.getElementById('box'));header {
position: fixed;
top: 0;
width: 100vw;
height: 30px;
background-color: lightgreen;
}
.wrapper {
position: relative;
margin-top: 600px;
}
#box {
position: relative;
left: 175px;
width: 150px;
height: 135px;
background-color: lightblue;
border: 2px solid;
}<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
<header>
<button>NAVIGATION BUTTON TO HIDE</button>
</header>
<div class="wrapper">
<div id="box">
</div>
</div>于 2019-03-15T11:32:46.247 回答
25
我们现在有一个原生的 javascript Intersection Observer API ，我们可以从中检测元素是否在视口中。
这是示例
const el = document.querySelector('#el')
const observer = new window.IntersectionObserver(([entry]) => {
if (entry.isIntersecting) {
console.log('ENTER')
return
}
console.log('LEAVE')
}, {
root: null,
threshold: 0.1, // set offset 0.1 means trigger if atleast 10% of element in viewport
})
observer.observe(el);body {
height: 300vh;
}
#el {
margin-top: 100vh;
}<div id="el">this is element</div>于 2021-07-05T21:49:32.393 回答
17
作为支持Element.getBoundingClientRect()的最简单的解决方案已经变得完美了：
function isInView(el) {
const box = el.getBoundingClientRect();
return box.top < window.innerHeight && box.bottom >= 0;
}
于 2019-07-30T19:54:40.400 回答
16
我在这里遇到的所有答案只检查元素是否位于当前视口内。但这并不意味着它是可见的。
如果给定元素位于内容溢出的 div 中，并且它被滚动到视图之外怎么办？
为了解决这个问题，您必须检查该元素是否被所有父母所包含。
我的解决方案正是这样做的：
它还允许您指定元素的可见程度。
Element.prototype.isVisible = function(percentX, percentY){
var tolerance = 0.01; //needed because the rects returned by getBoundingClientRect provide the position up to 10 decimals
if(percentX == null){
percentX = 100;
}
if(percentY == null){
percentY = 100;
}
var elementRect = this.getBoundingClientRect();
var parentRects = [];
var element = this;
while(element.parentElement != null){
parentRects.push(element.parentElement.getBoundingClientRect());
element = element.parentElement;
}
var visibleInAllParents = parentRects.every(function(parentRect){
var visiblePixelX = Math.min(elementRect.right, parentRect.right) - Math.max(elementRect.left, parentRect.left);
var visiblePixelY = Math.min(elementRect.bottom, parentRect.bottom) - Math.max(elementRect.top, parentRect.top);
var visiblePercentageX = visiblePixelX / elementRect.width * 100;
var visiblePercentageY = visiblePixelY / elementRect.height * 100;
return visiblePercentageX + tolerance > percentX && visiblePercentageY + tolerance > percentY;
});
return visibleInAllParents;
};
该解决方案忽略了由于其他事实（例如opacity: 0.
我已经在 Chrome 和 Internet Explorer 11 中测试了这个解决方案。
于 2016-06-23T17:47:56.950 回答
10
我发现对于大多数用例来说，这里接受的答案过于复杂。这段代码很好地完成了这项工作（使用 jQuery）并区分了完全可见和部分可见的元素：
var element = $("#element");
var topOfElement = element.offset().top;
var bottomOfElement = element.offset().top + element.outerHeight(true);
var $window = $(window);
$window.bind('scroll', function() {
var scrollTopPosition = $window.scrollTop()+$window.height();
var windowScrollTop = $window.scrollTop()
if (windowScrollTop > topOfElement && windowScrollTop < bottomOfElement) {
// Element is partially visible (above viewable area)
console.log("Element is partially visible (above viewable area)");
} else if (windowScrollTop > bottomOfElement && windowScrollTop > topOfElement) {
// Element is hidden (above viewable area)
console.log("Element is hidden (above viewable area)");
} else if (scrollTopPosition < topOfElement && scrollTopPosition < bottomOfElement) {
// Element is hidden (below viewable area)
console.log("Element is hidden (below viewable area)");
} else if (scrollTopPosition < bottomOfElement && scrollTopPosition > topOfElement) {
// Element is partially visible (below viewable area)
console.log("Element is partially visible (below viewable area)");
} else {
// Element is completely visible
console.log("Element is completely visible");
}
});
于 2015-01-30T14:49:11.457 回答
6
我认为这是一种更实用的方法。 丹的答案在递归上下文中不起作用。
当您的元素在其他可滚动的 div 中时，此函数通过递归测试任何级别直到 HTML 标记来解决问题，并在第一个 false 处停止。
/**
* fullVisible=true only returns true if the all object rect is visible
*/
function isReallyVisible(el, fullVisible) {
if ( el.tagName == "HTML" )
return true;
var parentRect=el.parentNode.getBoundingClientRect();
var rect = arguments[2] || el.getBoundingClientRect();
return (
( fullVisible ? rect.top >= parentRect.top : rect.bottom > parentRect.top ) &&
( fullVisible ? rect.left >= parentRect.left : rect.right > parentRect.left ) &&
( fullVisible ? rect.bottom <= parentRect.bottom : rect.top < parentRect.bottom ) &&
( fullVisible ? rect.right <= parentRect.right : rect.left < parentRect.right ) &&
isReallyVisible(el.parentNode, fullVisible, rect)
);
};
于 2015-04-24T15:12:46.937 回答
5
这是我的解决方案。如果元素隐藏在可滚动容器中，它将起作用。
这是一个演示（尝试重新调整窗口大小）
var visibleY = function(el){
var top = el.getBoundingClientRect().top, rect, el = el.parentNode;
do {
rect = el.getBoundingClientRect();
if (top <= rect.bottom === false)
return false;
el = el.parentNode;
} while (el != document.body);
// Check it's within the document viewport
return top <= document.documentElement.clientHeight;
};
我只需要检查它是否在 Y 轴上可见（对于滚动 Ajax 加载更多记录功能）。
于 2014-02-07T11:39:43.453 回答
5
在 Android 上放大 Google Chrome 时，最接受的答案不起作用。结合Dan 的回答，为了说明 Android 上的 Chrome，必须使用visualViewport 。以下示例仅考虑垂直检查并使用 jQuery 作为窗口高度：
var Rect = YOUR_ELEMENT.getBoundingClientRect();
var ElTop = Rect.top, ElBottom = Rect.bottom;
var WindowHeight = $(window).height();
if(window.visualViewport) {
ElTop -= window.visualViewport.offsetTop;
ElBottom -= window.visualViewport.offsetTop;
WindowHeight = window.visualViewport.height;
}
var WithinScreen = (ElTop >= 0 && ElBottom <= WindowHeight);
于 2019-11-17T09:37:42.817 回答
4
基于dan 的解决方案，我尝试清理实现，以便在同一页面上多次使用它更容易：
$(function() {
$(window).on('load resize scroll', function() {
addClassToElementInViewport($('.bug-icon'), 'animate-bug-icon');
addClassToElementInViewport($('.another-thing'), 'animate-thing');
// repeat as needed ...
});
function addClassToElementInViewport(element, newClass) {
if (inViewport(element)) {
element.addClass(newClass);
}
}
function inViewport(element) {
if (typeof jQuery === "function" && element instanceof jQuery) {
element = element[0];
}
var elementBounds = element.getBoundingClientRect();
return (
elementBounds.top >= 0 &&
elementBounds.left >= 0 &&
elementBounds.bottom <= $(window).height() &&
elementBounds.right <= $(window).width()
);
}
});
我使用它的方式是，当元素滚动到视图中时，我添加了一个触发 CSS 关键帧动画的类。当您在页面上有 10 多个有条件的动画时，它非常简单，并且效果特别好。
于 2014-12-26T21:00:32.680 回答
4
以前答案中的大多数用法在这些方面都失败了：
-当元素的任何像素可见，但不是“角落”时，
- 当一个元素大于视口并且居中时，
- 他们中的大多数只检查文档或窗口中的单个元素。
好吧，对于所有这些问题，我都有一个解决方案，而且好处是：
visible-当任何边只出现一个像素并且不是角落时，您可以返回，
visible-当元素大于视口时，您仍然可以返回，- 你可以选择你的
parent element或者你可以自动让它选择，- 也适用于动态添加的元素。
如果您检查下面的代码片段，您将看到overflow-scroll在元素容器中使用的差异不会造成任何问题，并且即使像素从任何一侧出现或当元素大于视口并且我们看到内部时，也会看到与此处的其他答案不同它仍然有效的元素的像素。
用法很简单：
// For checking element visibility from any sides
isVisible(element)
// For checking elements visibility in a parent you would like to check
var parent = document; // Assuming you check if 'element' inside 'document'
isVisible(element, parent)
// For checking elements visibility even if it's bigger than viewport
isVisible(element, null, true) // Without parent choice
isVisible(element, parent, true) // With parent choice
没有它的演示crossSearchAlgorithm对于大于视口检查 element3 内部像素的元素很有用：
function isVisible(element, parent, crossSearchAlgorithm) {
var rect = element.getBoundingClientRect(),
prect = (parent != undefined) ? parent.getBoundingClientRect() : element.parentNode.getBoundingClientRect(),
csa = (crossSearchAlgorithm != undefined) ? crossSearchAlgorithm : false,
efp = function (x, y) { return document.elementFromPoint(x, y) };
// Return false if it's not in the viewport
if (rect.right < prect.left || rect.bottom < prect.top || rect.left > prect.right || rect.top > prect.bottom) {
return false;
}
var flag = false;
// Return true if left to right any border pixel reached
for (var x = rect.left; x < rect.right; x++) {
if (element.contains(efp(rect.top, x)) || element.contains(efp(rect.bottom, x))) {
flag = true;
break;
}
}
// Return true if top to bottom any border pixel reached
if (flag == false) {
for (var y = rect.top; y < rect.bottom; y++) {
if (element.contains(efp(rect.left, y)) || element.contains(efp(rect.right, y))) {
flag = true;
break;
}
}
}
if(csa) {
// Another algorithm to check if element is centered and bigger than viewport
if (flag == false) {
var x = rect.left;
var y = rect.top;
// From top left to bottom right
while(x < rect.right || y < rect.bottom) {
if (element.contains(efp(x,y))) {
flag = true;
break;
}
if(x < rect.right) { x++; }
if(y < rect.bottom) { y++; }
}
if (flag == false) {
x = rect.right;
y = rect.top;
// From top right to bottom left
while(x > rect.left || y < rect.bottom) {
if (element.contains(efp(x,y))) {
flag = true;
break;
}
if(x > rect.left) { x--; }
if(y < rect.bottom) { y++; }
}
}
}
}
return flag;
}
// Check multiple elements visibility
document.getElementById('container').addEventListener("scroll", function() {
var elementList = document.getElementsByClassName("element");
var console = document.getElementById('console');
for (var i=0; i < elementList.length; i++) {
// I did not define parent, so it will be element's parent
if (isVisible(elementList[i])) {
console.innerHTML = "Element with id[" + elementList[i].id + "] is visible!";
break;
} else {
console.innerHTML = "Element with id[" + elementList[i].id + "] is hidden!";
}
}
});
// Dynamically added elements
for(var i=4; i <= 6; i++) {
var newElement = document.createElement("div");
newElement.id = "element" + i;
newElement.classList.add("element");
document.getElementById('container').appendChild(newElement);
}#console { background-color: yellow; }
#container {
width: 300px;
height: 100px;
background-color: lightblue;
overflow-y: auto;
padding-top: 150px;
margin: 45px;
}
.element {
margin: 400px;
width: 400px;
height: 320px;
background-color: green;
}
#element3 {
position: relative;
margin: 40px;
width: 720px;
height: 520px;
background-color: green;
}
#element3::before {
content: "";
position: absolute;
top: -10px;
left: -10px;
margin: 0px;
width: 740px;
height: 540px;
border: 5px dotted green;
background: transparent;
}<div id="console"></div>
<div id="container">
<div id="element1" class="element"></div>
<div id="element2" class="element"></div>
<div id="element3" class="element"></div>
</div>你看，当你在 element3 里面时，它无法判断它是否可见，因为我们只检查元素是否从边或角可见。
这包括crossSearchAlgorithm允许您visible在元素大于视口时仍然返回：
function isVisible(element, parent, crossSearchAlgorithm) {
var rect = element.getBoundingClientRect(),
prect = (parent != undefined) ? parent.getBoundingClientRect() : element.parentNode.getBoundingClientRect(),
csa = (crossSearchAlgorithm != undefined) ? crossSearchAlgorithm : false,
efp = function (x, y) { return document.elementFromPoint(x, y) };
// Return false if it's not in the viewport
if (rect.right < prect.left || rect.bottom < prect.top || rect.left > prect.right || rect.top > prect.bottom) {
return false;
}
var flag = false;
// Return true if left to right any border pixel reached
for (var x = rect.left; x < rect.right; x++) {
if (element.contains(efp(rect.top, x)) || element.contains(efp(rect.bottom, x))) {
flag = true;
break;
}
}
// Return true if top to bottom any border pixel reached
if (flag == false) {
for (var y = rect.top; y < rect.bottom; y++) {
if (element.contains(efp(rect.left, y)) || element.contains(efp(rect.right, y))) {
flag = true;
break;
}
}
}
if(csa) {
// Another algorithm to check if element is centered and bigger than viewport
if (flag == false) {
var x = rect.left;
var y = rect.top;
// From top left to bottom right
while(x < rect.right || y < rect.bottom) {
if (element.contains(efp(x,y))) {
flag = true;
break;
}
if(x < rect.right) { x++; }
if(y < rect.bottom) { y++; }
}
if (flag == false) {
x = rect.right;
y = rect.top;
// From top right to bottom left
while(x > rect.left || y < rect.bottom) {
if (element.contains(efp(x,y))) {
flag = true;
break;
}
if(x > rect.left) { x--; }
if(y < rect.bottom) { y++; }
}
}
}
}
return flag;
}
// Check multiple elements visibility
document.getElementById('container').addEventListener("scroll", function() {
var elementList = document.getElementsByClassName("element");
var console = document.getElementById('console');
for (var i=0; i < elementList.length; i++) {
// I did not define parent so it will be element's parent
// and it will do crossSearchAlgorithm
if (isVisible(elementList[i],null,true)) {
console.innerHTML = "Element with id[" + elementList[i].id + "] is visible!";
break;
} else {
console.innerHTML = "Element with id[" + elementList[i].id + "] is hidden!";
}
}
});
// Dynamically added elements
for(var i=4; i <= 6; i++) {
var newElement = document.createElement("div");
newElement.id = "element" + i;
newElement.classList.add("element");
document.getElementById('container').appendChild(newElement);
}#console { background-color: yellow; }
#container {
width: 300px;
height: 100px;
background-color: lightblue;
overflow-y: auto;
padding-top: 150px;
margin: 45px;
}
.element {
margin: 400px;
width: 400px;
height: 320px;
background-color: green;
}
#element3 {
position: relative;
margin: 40px;
width: 720px;
height: 520px;
background-color: green;
}
#element3::before {
content: "";
position: absolute;
top: -10px;
left: -10px;
margin: 0px;
width: 740px;
height: 540px;
border: 5px dotted green;
background: transparent;
}<div id="console"></div>
<div id="container">
<div id="element1" class="element"></div>
<div id="element2" class="element"></div>
<div id="element3" class="element"></div>
</div>JSFiddle 玩：http: //jsfiddle.net/BerkerYuceer/grk5az2c/
如果元素的任何部分是否显示在视图中，则此代码用于提供更精确的信息。对于性能选项或仅垂直幻灯片，请勿使用此选项！此代码在绘制案例时更有效。
于 2019-09-12T10:31:00.987 回答
3
/**
* Returns Element placement information in Viewport
* @link https://stackoverflow.com/a/70476497/2453148
*
* @typedef {object} ViewportInfo - Whether the element is…
* @property {boolean} isInViewport - fully or partially in the viewport
* @property {boolean} isPartiallyInViewport - partially in the viewport
* @property {boolean} isInsideViewport - fully inside viewport
* @property {boolean} isAroundViewport - completely covers the viewport
* @property {boolean} isOnEdge - intersects the edge of viewport
* @property {boolean} isOnTopEdge - intersects the top edge
* @property {boolean} isOnRightEdge - intersects the right edge
* @property {boolean} isOnBottomEdge - is intersects the bottom edge
* @property {boolean} isOnLeftEdge - is intersects the left edge
*
* @param el Element
* @return {Object} ViewportInfo
*/
function getElementViewportInfo(el) {
let result = {};
let rect = el.getBoundingClientRect();
let windowHeight = window.innerHeight || document.documentElement.clientHeight;
let windowWidth = window.innerWidth || document.documentElement.clientWidth;
let insideX = rect.left >= 0 && rect.left + rect.width <= windowWidth;
let insideY = rect.top >= 0 && rect.top + rect.height <= windowHeight;
result.isInsideViewport = insideX && insideY;
let aroundX = rect.left < 0 && rect.left + rect.width > windowWidth;
let aroundY = rect.top < 0 && rect.top + rect.height > windowHeight;
result.isAroundViewport = aroundX && aroundY;
let onTop = rect.top < 0 && rect.top + rect.height > 0;
let onRight = rect.left < windowWidth && rect.left + rect.width > windowWidth;
let onLeft = rect.left < 0 && rect.left + rect.width > 0;
let onBottom = rect.top < windowHeight && rect.top + rect.height > windowHeight;
let onY = insideY || aroundY || onTop || onBottom;
let onX = insideX || aroundX || onLeft || onRight;
result.isOnTopEdge = onTop && onX;
result.isOnRightEdge = onRight && onY;
result.isOnBottomEdge = onBottom && onX;
result.isOnLeftEdge = onLeft && onY;
result.isOnEdge = result.isOnLeftEdge || result.isOnRightEdge ||
result.isOnTopEdge || result.isOnBottomEdge;
let isInX =
insideX || aroundX || result.isOnLeftEdge || result.isOnRightEdge;
let isInY =
insideY || aroundY || result.isOnTopEdge || result.isOnBottomEdge;
result.isInViewport = isInX && isInY;
result.isPartiallyInViewport =
result.isInViewport && result.isOnEdge;
return result;
}
于 2021-12-24T21:04:37.860 回答
2
更好的解决方案：
function getViewportSize(w) {
var w = w || window;
if(w.innerWidth != null)
return {w:w.innerWidth, h:w.innerHeight};
var d = w.document;
if (document.compatMode == "CSS1Compat") {
return {
w: d.documentElement.clientWidth,
h: d.documentElement.clientHeight
};
}
return { w: d.body.clientWidth, h: d.body.clientWidth };
}
function isViewportVisible(e) {
var box = e.getBoundingClientRect();
var height = box.height || (box.bottom - box.top);
var width = box.width || (box.right - box.left);
var viewport = getViewportSize();
if(!height || !width)
return false;
if(box.top > viewport.h || box.bottom < 0)
return false;
if(box.right < 0 || box.left > viewport.w)
return false;
return true;
}
于 2013-02-08T08:57:41.570 回答
2
我有同样的问题，并通过使用 getBoundingClientRect() 解决了这个问题。
这段代码是完全“通用的”，只需编写一次就可以工作（您不必为您想知道的每个元素都写出它在视口中）。
此代码仅检查它是否在视口中垂直，而不是水平。在这种情况下，变量（数组）'elements' 包含您正在检查的所有元素，以便在视口中垂直放置，因此在任何地方抓取您想要的任何元素并将它们存储在那里。
“for循环”循环遍历每个元素并检查它是否在视口中垂直。每次用户滚动时都会执行此代码！如果 getBoudingClientRect().top 小于视口的 3/4（元素在视口中的四分之一），它会注册为“在视口中”。
由于代码是通用的，您将想知道“哪个”元素在视口中。要找出它，您可以通过自定义属性、节点名称、id、类名称等来确定它。
这是我的代码（告诉我它是否不起作用；它已经在 Internet Explorer 11、Firefox 40.0.3、Chrome 版本 45.0.2454.85 m、Opera 31.0.1889.174 和 Windows 10 的 Edge 中进行了测试，[还没有 Safari ])...
// Scrolling handlers...
window.onscroll = function(){
var elements = document.getElementById('whatever').getElementsByClassName('whatever');
for(var i = 0; i != elements.length; i++)
{
if(elements[i].getBoundingClientRect().top <= window.innerHeight*0.75 &&
elements[i].getBoundingClientRect().top > 0)
{
console.log(elements[i].nodeName + ' ' +
elements[i].className + ' ' +
elements[i].id +
' is in the viewport; proceed with whatever code you want to do here.');
}
};
于 2015-09-13T13:59:36.807 回答
2
这是一个函数，它告诉元素是否在父元素的当前视口中可见：
function inParentViewport(el, pa) {
if (typeof jQuery === "function"){
if (el instanceof jQuery)
el = el[0];
if (pa instanceof jQuery)
pa = pa[0];
}
var e = el.getBoundingClientRect();
var p = pa.getBoundingClientRect();
return (
e.bottom >= p.top &&
e.right >= p.left &&
e.top <= p.bottom &&
e.left <= p.right
);
}
于 2018-09-28T10:01:57.137 回答
2
尽可能简单，IMO：
function isVisible(elem) {
var coords = elem.getBoundingClientRect();
return Math.abs(coords.top) <= coords.height;
}
于 2019-03-15T14:06:44.017 回答
1
这将检查元素是否至少部分在视图中（垂直尺寸）：
function inView(element) {
var box = element.getBoundingClientRect();
return inViewBox(box);
}
function inViewBox(box) {
return ((box.bottom < 0) || (box.top > getWindowSize().h)) ? false : true;
}
function getWindowSize() {
return { w: document.body.offsetWidth || document.documentElement.offsetWidth || window.innerWidth, h: document.body.offsetHeight || document.documentElement.offsetHeight || window.innerHeight}
}
于 2015-01-02T12:17:33.793 回答
1
这是对我有用的简单而小型的解决方案。
示例：您想查看该元素是否在具有溢出滚动的父元素中可见。
$(window).on('scroll', function () {
var container = $('#sidebar');
var containerHeight = container.height();
var scrollPosition = $('#row1').offset().top - container.offset().top;
if (containerHeight < scrollPosition) {
console.log('not visible');
} else {
console.log('visible');
}
})
于 2017-06-19T10:49:18.090 回答
1
这里的所有答案都是确定元素是否完全包含在视口中，而不仅仅是以某种方式可见。例如，如果在视图底部只能看到一半图像，则考虑到“外部”，此处的解决方案将失败。
我有一个用例，我正在通过 进行延迟加载IntersectionObserver，但由于在弹出期间发生动画，我不想观察在页面加载时已经相交的任何图像。为此，我使用了以下代码：
const bounding = el.getBoundingClientRect();
const isVisible = (0 < bounding.top && bounding.top < (window.innerHeight || document.documentElement.clientHeight)) ||
(0 < bounding.bottom && bounding.bottom < (window.innerHeight || document.documentElement.clientHeight));
这基本上是检查顶部或底部边界是否在视口中独立。另一端可能在外面，但只要一端在里面，它至少部分是“可见的”。
于 2020-03-12T03:19:33.813 回答
0
我使用这个函数（它只检查 y 是否在屏幕内，因为大多数时候不需要 x）
function elementInViewport(el) {
var elinfo = {
"top":el.offsetTop,
"height":el.offsetHeight,
};
if (elinfo.top + elinfo.height < window.pageYOffset || elinfo.top > window.pageYOffset + window.innerHeight) {
return false;
} else {
return true;
}
}
于 2017-01-13T06:57:09.597 回答
0
这是一个检查给定元素是否在其父元素中完全可见的片段：
export const visibleInParentViewport = (el) => {
const elementRect = el.getBoundingClientRect();
const parentRect = el.parentNode.getBoundingClientRect();
return (
elementRect.top >= parentRect.top &&
elementRect.right >= parentRect.left &&
elementRect.top + elementRect.height <= parentRect.bottom &&
elementRect.left + elementRect.width <= parentRect.right
);
}
于 2021-04-16T11:24:37.353 回答
-1
Domysee 的回答https://stackoverflow.com/a/37998526接近正确。
许多示例使用“完全包含在视口中”，他的代码使用百分比来允许部分可见。他的代码还解决了大多数示例忽略的“是父剪辑视图”的问题。
一个缺失的元素是父级滚动条的影响——getBoundingClientRect返回父级的外部矩形，其中包括滚动条，而不是内部矩形，后者不包含。子级可以隐藏在父级滚动条后面，并且在不可见时被视为可见。
推荐的观察者模式不适合我的用例：使用箭头键更改表中当前选定的行，并确保新选择可见。为此使用观察者将过于复杂。
这是一些代码 -
它包括一个额外的 hack ( fudgeY)，因为我的表格有一个粘性标题，无法通过直接的方式检测到（并且自动处理这个会非常乏味）。此外，对于所需的可见分数，它使用小数（0 到 1）而不是百分比。（对于我的情况，我需要完整的 y，而 x 不相关）。
function intersectRect(r1, r2) {
var r = {};
r.left = r1.left < r2.left ? r2.left : r1.left;
r.top = r1.top < r2.top ? r2.top : r1.top;
r.right = r1.right < r2.right ? r1.right : r2.right;
r.bottom = r1.bottom < r2.bottom ? r1.bottom : r2.bottom;
if (r.left < r.right && r.top < r.bottom)
return r;
return null;
}
function innerRect(e) {
var b,r;
b = e.getBoundingClientRect();
r = {};
r.left = b.left;
r.top = b.top;
r.right = b.left + e.clientWidth;
r.bottom = b.top + e.clientHeight;
return r;
}
function isViewable(e, fracX, fracY, fudgeY) {
// ref https://stackoverflow.com/a/37998526
// intersect all the rects and then check the result once
// innerRect: mind the scroll bars
// fudgeY: handle "sticky" thead in parent table. Ugh.
var r, pr, er;
er = e.getBoundingClientRect();
r = er;
for (;;) {
e = e.parentElement;
if (!e)
break;
pr = innerRect(e);
if (fudgeY)
pr.top += fudgeY;
r = intersectRect(r, pr);
if (!r)
return false;
}
if (fracX && ((r.right-r.left) / (er.right-er.left)) < (fracX-0.001))
return false;
if (fracY && ((r.bottom-r.top) / (er.bottom-er.top)) < (fracY-0.001))
return false;
return true;
}
于 2021-10-04T03:25:06.513 回答
-2
对于类似的挑战，我真的很喜欢这个为scrollIntoViewIfNeeded()公开 polyfill 的要点。
回答所需的所有必要功夫都在此块内：
var parent = this.parentNode,
parentComputedStyle = window.getComputedStyle(parent, null),
parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width')),
parentBorderLeftWidth = parseInt(parentComputedStyle.getPropertyValue('border-left-width')),
overTop = this.offsetTop - parent.offsetTop < parent.scrollTop,
overBottom = (this.offsetTop - parent.offsetTop + this.clientHeight - parentBorderTopWidth) > (parent.scrollTop + parent.clientHeight),
overLeft = this.offsetLeft - parent.offsetLeft < parent.scrollLeft,
overRight = (this.offsetLeft - parent.offsetLeft + this.clientWidth - parentBorderLeftWidth) > (parent.scrollLeft + parent.clientWidth),
alignWithTop = overTop && !overBottom;
this指的是您想知道的元素，例如，overTop或者overBottom-您应该得到漂移...
于 2016-03-14T13:14:21.917 回答