可能的重复：
jQuery - 检查元素在滚动后是否可见
我正在尝试确定某个元素是否在屏幕上可见。为此，我尝试使用 offsetTop 查找元素的垂直位置，但返回的值不正确。在这种情况下，除非向下滚动，否则元素不可见。但尽管如此，当我的屏幕高度为 703 时，offsetTop 返回的值为 618，因此根据 offsetTop 元素应该是可见的。
我正在使用的代码如下所示：
function posY(obj)
{
var curtop = 0;
if( obj.offsetParent )
{
while(1)
{
curtop += obj.offsetTop;
if( !obj.offsetParent )
{
break;
}
obj = obj.offsetParent;
}
} else if( obj.y )
{
curtop += obj.y;
}
return curtop;
}
先感谢您！
--- 无耻的插件 ---
我已将此功能添加到我创建的库中
vanillajs-browser-helpers：https : //github.com/Tokimon/vanillajs-browser-helpers/blob/master/inView.js
--- -----------------------------
BenM 说得好，您需要检测视口的高度 + 滚动位置以匹配您的顶部位置。您正在使用的函数没问题并且可以完成工作，尽管它比需要的要复杂一些。
如果你不使用，jQuery那么脚本将是这样的：
function posY(elm) {
var test = elm, top = 0;
while(!!test && test.tagName.toLowerCase() !== "body") {
top += test.offsetTop;
test = test.offsetParent;
}
return top;
}
function viewPortHeight() {
var de = document.documentElement;
if(!!window.innerWidth)
{ return window.innerHeight; }
else if( de && !isNaN(de.clientHeight) )
{ return de.clientHeight; }
return 0;
}
function scrollY() {
if( window.pageYOffset ) { return window.pageYOffset; }
return Math.max(document.documentElement.scrollTop, document.body.scrollTop);
}
function checkvisible( elm ) {
var vpH = viewPortHeight(), // Viewport Height
st = scrollY(), // Scroll Top
y = posY(elm);
return (y > (vpH + st));
}
使用jQuery要容易得多：
function checkVisible( elm, evalType ) {
evalType = evalType || "visible";
var vpH = $(window).height(), // Viewport Height
st = $(window).scrollTop(), // Scroll Top
y = $(elm).offset().top,
elementHeight = $(elm).height();
if (evalType === "visible") return ((y < (vpH + st)) && (y > (st - elementHeight)));
if (evalType === "above") return ((y < (vpH + st)));
}
这甚至提供了第二个参数。使用“visible”（或没有第二个参数），它会严格检查元素是否在屏幕上。如果将其设置为“above”，则当相关元素位于屏幕上或屏幕上方时，它将返回 true。
见实战：http : //jsfiddle.net/RJX5N/2/
我希望这回答了你的问题。
- 改进版 -
这要短得多，也应该这样做：
function checkVisible(elm) {
var rect = elm.getBoundingClientRect();
var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}
用小提琴来证明它：http : //jsfiddle.net/t2L274ty/1/
并与一个版本threshold，并mode包括：
function checkVisible(elm, threshold, mode) {
threshold = threshold || 0;
mode = mode || 'visible';
var rect = elm.getBoundingClientRect();
var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
var above = rect.bottom - threshold < 0;
var below = rect.top - viewHeight + threshold >= 0;
return mode === 'above' ? above : (mode === 'below' ? below : !above && !below);
}
并用小提琴来证明它：http : //jsfiddle.net/t2L274ty/2/
您可以使用 jQuery，因为它是跨浏览器兼容的吗？
function isOnScreen(element)
{
var curPos = element.offset();
var curTop = curPos.top;
var screenHeight = $(window).height();
return (curTop > screenHeight) ? false : true;
}
然后使用以下内容调用该函数：
if(isOnScreen($('#myDivId'))) { /* Code here... */ };