Discussion :

[romaintaz]

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.

[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 ... ???

[romaintaz]

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

[SpaceFrog]

je dois confondre avec ScrollIntoViex ...

parcontre tu peux essayer :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[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 ?

[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

[romaintaz]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !