检查元素是否在屏幕上可见

可能重复：
jQuery – 检查滚动后元素是否可见

我试图确定一个元素是否在屏幕上可见。 为了这个，我试图find元素的垂直位置使用offsetTop，但返回的值是不正确的。 在这种情况下，除非向下滚动，否则元素不可见。 但是，尽pipe如此，当我的屏幕高度是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; } 

先谢谢你！

Answer 1

BenM说，你需要检测视口的高度+滚动位置，以配合你的顶级毒品。 你使用的function是可以的，做这个工作，尽pipe它需要更复杂的function。

如果你不使用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); } 

用小提琴来certificate： 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); } 

并用小提琴来certificate它： http : //jsfiddle.net/t2L274ty/2/

Answer 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... */ }; 

Answer 3

你想使用scrollTop然后比较元素顶部的位置，然后页。