Savoir si un élément est affiché ou non

Version imprimable

09/04/2008, 14h28
romaintaz

Savoir si un élément est affiché ou non

Bonjour,

J'aimerais savoir, via une fonction Javascript, si un élément donné de ma page est visible. Je ne parle pas de la visibilité du genre element.style.display, je parle d'une visibilité en rapport au scroll vertical (ou horizontal) de ma page.
Autrement dit, j'aimerais savoir si à un instant T, un élément E est bien présent sur la partie affichée de ma page.

J'imaginais procéder comme suit : Je calcule la position de E dans ma page (par exemple comme ça), puis je calcule les coordonnées de la partie visible de la page, et je regarde sur les positions de E sont bien dans cette zone.
Hélas, je ne sais pas comment calculer les coordonnées de la partie visible de mon écran !

Est-il possible de faire ça ?

Merci.
09/04/2008, 14h55
SpaceFrog

En fouillant dasn ma mémoire il me semble qu'il existe une propriété sous IE ... et toujours de mémoire ça devait être javatwister qui m'en avait parlé ...
Mais quel credit accorder à ma mémoire ... ???
09/04/2008, 14h57
romaintaz

Ah, juste pour info : mon appli ne tourne que sur IE 6...

je dois confondre avec ScrollIntoViex ... :oops:

parcontre tu peux essayer :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script type="text/javascript">
 
function IsVisible(obj){
var d=document,w=window
var Elm=d.getElementById(obj)
var relTop=Elm.offsetTop-(w.scrollY||d.body.scrollTop)
var docHg=w.innerHeight||d.documentElement.offsetHeigh t
if(relTop<-20||(+relTop+Elm.offsetHeight/4)>docHg){return false;}
else {return true}
 
}
</script>

09/04/2008, 15h17
romaintaz

Merci Spacefrog, ça marche à peu près !
Visiblement, il y a l'air d'y avoir un petit décalage... Peux-tu m'expliquer un petit peu cette ligne : if(relTop<-20||(+relTop+Elm.offsetHeight/4)>docHg) ? Pourquoi le test avec -20 ?
09/04/2008, 15h19
SpaceFrog

la hauteur d'une line-height ?

je ne sais pas à vrai dire je n'ai pas testé, j'ai trouvé ce code, je l'ai survolé et adapté un peu

Bon, merci bien SpaceFrog, j'ai adapté ce code, pour le rendre un peu plus compréhensible ;) (par contre, j'ai viré sa compatibilité avec FF je pense).

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function testVisibility(elt) {
    // Récupération des positions "haute" et "basse" du composant...
    var posTop = getPositionTop(elt);
    var posBottom = posTop + elt.offsetHeight;
    // Récupération des positions "haute" et "basse" de la partie visible de la fenêtre...
    var visibleTop = document.body.scrollTop;
    var visibleBottom = visibleTop + document.documentElement.offsetHeight;
    // On teste !
    if ((posBottom > visibleTop) && (posTop < visibleBottom)) {
        return true;
    } else {
        return false;
    }
}

Merci bieng !