Vérifier si l'élément est visible sur l'écran [dupliquer]
possibilité de dupliquer:
jQuery-vérifier si l'élément est visible après l'écrouissage
j'essaie de déterminer si un élément est visible à l'écran. Pour ce faire, j'essaie de trouver la position verticale de l'élément en utilisant offsetTop, mais la valeur retournée n'est pas correcte. Dans ce cas, l'élément n'est pas visible, sauf si vous faites défiler vers le bas. Mais, en dépit de ceci, offsetTop retourne une valeur de 618 lorsque la hauteur de mon écran est 703, donc selon offsetTop l'élément devrait être visible.
le code que j'utilise ressemble à ceci:
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;
}
Merci d'avance!
2 réponses
Benm bien déclaré, Vous devez détecter la hauteur du viewport + la position de défilement pour correspondre à votre poisiton supérieur. La fonction que vous utilisez est ok et fait le travail, bien que son Abit plus complexe ath il doit.
si vous n'utilisez pas jQuery
alors le script serait quelque chose comme ceci:
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));
}
L'utilisation de jQuery est beaucoup plus facile:
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)));
}
cela offre même un second paramètre. Avec "visible" (ou aucun second paramètre) il vérifie strictement si un élément est à l'écran. S'il est réglé sur "haut", il retournera vrai si l'élément en question est sur ou au-dessus de l'écran.
voir en action: http://jsfiddle.net/RJX5N/2 /
j'espère que cela répondra à votre question.
-- VERSION AMÉLIORÉE--
C'est beaucoup plus court et devrait le faire aussi:
function checkVisible(elm) {
var rect = elm.getBoundingClientRect();
var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}
avec un violon pour le prouver: http://jsfiddle.net/t2L274ty/1 /
et une version avec threshold
et mode
inclus:
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);
}
et avec un violon pour le prouver: http://jsfiddle.net/t2L274ty/2 /
pourriez-vous utiliser jQuery, puisque c'est compatible avec tous les navigateurs?
function isOnScreen(element)
{
var curPos = element.offset();
var curTop = curPos.top;
var screenHeight = $(window).height();
return (curTop > screenHeight) ? false : true;
}
et ensuite appeler la fonction en utilisant quelque chose comme:
if(isOnScreen($('#myDivId'))) { /* Code here... */ };