检查元素是否在屏幕上可见
可能重复：
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;
}
先谢谢你！
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)));
}
这甚至提供了第二个参数。 使用“可见”（或没有第二个参数），它会严格检查屏幕上是否有元素。 如果它设置为“高于”，则当有问题的元素位于或高于屏幕时，它将返回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... */ };
您想使用scrollTop，然后将元素顶部位置与页面进行比较。
链接地址: http://www.djcxy.com/p/2379.html