有没有一种有效的方法来判断DOM元素(在HTML文档中)当前是否可见(显示在 视口中 )?
(问题是针对Firefox的。)
更新: 时间在前进,我们的浏览器也在前进。 不再推荐 使用 此技术, 如果不需要支持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 ); }