[SRC] Savoir si un élément est visible à l'écran

**Bovino** · 13/01/2009, 16h23

Bonjour,
Voici un petit script qui permet de tester si un élément (repéré par son id) est visible à l'écran.
Désolé pour le manque de commentaires, je n'ai pas encore eu le temps !!!

Fonction estVisible pour tester si un élément passé en paramètre est visible à l'écran.

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
function estVisible(id_element){
	var cadreVisible = {xMin: 0, xMax: 0, yMin: 0, yMax: 0}, elementVisible = {xMin: 0, xMax: 0, yMin: 0, yMax: 0};
	var source = document.getElementById(id_element), sourceParent = source.offsetParent;
	var total = {hauteur: false, largeur: false}, partiel = {hauteur: false, largeur: false};
	cadreVisible.xMin = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
	cadreVisible.xMax = window.pageXOffset + window.innerWidth || document.documentElement.scrollLeft + document.documentElement.clientWidth || document.body.scrollLeft + document.body.clientWidth;
	cadreVisible.yMin = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
	cadreVisible.yMax = window.pageYOffset + window.innerHeight || document.documentElement.scrollTop + document.documentElement.clientHeight || document.body.scrollTop + document.body.clientHeight;
	elementVisible.xMin = source.offsetLeft;
	elementVisible.yMin = source.offsetTop;
	while(sourceParent) {
		elementVisible.xMin += sourceParent.offsetLeft;
		elementVisible.yMin += sourceParent.offsetTop;
		sourceParent = sourceParent.offsetParent;
	}
	elementVisible.xMax = elementVisible.xMin + source.offsetWidth;
	elementVisible.yMax = elementVisible.yMin + source.offsetHeight;
	if(cadreVisible.xMin <= elementVisible.xMin && cadreVisible.xMax >= elementVisible.xMax){
		total.largeur = true;
	}
	else if(!(cadreVisible.xMax < elementVisible.xMin || cadreVisible.xMin > elementVisible.xMax)){
		partiel.largeur = true;
	}
	if(cadreVisible.yMin <= elementVisible.yMin && cadreVisible.yMax >= elementVisible.yMax){
		total.hauteur = true;
	}
	else if(!(cadreVisible.yMax < elementVisible.yMin || cadreVisible.yMin > elementVisible.yMax)){
		partiel.hauteur = true;
	}
	if(total.largeur && total.hauteur){
		return(id_element + ' est entièrement visible dans la page !');
	}
	else if(total.largeur && partiel.hauteur){
		return(id_element + ' est entièrement visible en largeur mais tronqué en hauteur');
	}
	else if(total.hauteur && partiel.largeur){
		return(id_element + ' est entièrement visible en hauteur mais tronqué en largeur');
	}
	else if(partiel.hauteur && partiel.largeur){
		return(id_element + ' est tronqué en hauteur et en largeur');
	}
	else{
		return(id_element + ' n\'est pas visible dans la page !');
	}
}

Utilisation
La fonction prend donc en paramètre l'id d'un élément HTML, calcule la portion visible de la page, la position de l'élément dans la page et teste si la position est dans la partie visible.
Elle renvoie une chaine de caractère indiquant si :

L'élément est entièrement visible
L'élément est visible partiellement (en hauteur et / ou largeur
L'élément n'est pas visible.

Exemple d'intégration dans une page HTML
Une page complète de test (faites défiler la page en hauteur et largeur et cliquez sur la page pour afficher le résultat) :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
<!--
body{
        width: 5000px;
        height: 2500px;
}
.test{
        position: relative;
        width: 500px;
        height: 250px;
        left: 1500px;
        top: 1000px;
        background-color: silver;
        text-align: center;
        border: 1px solid black;
}
-->
</style>
<script type="text/javascript"> 
<!--// [CDATA[ 
document.onclick=function(){alert(estVisible('test'))}
function estVisible(id_element){
        var cadreVisible = {xMin: 0, xMax: 0, yMin: 0, yMax: 0}, elementVisible = {xMin: 0, xMax: 0, yMin: 0, yMax: 0};
        var source = document.getElementById(id_element), sourceParent = source.offsetParent;
        var total = {hauteur: false, largeur: false}, partiel = {hauteur: false, largeur: false};
        cadreVisible.xMin = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
        cadreVisible.xMax = window.pageXOffset + window.innerWidth || document.documentElement.scrollLeft + document.documentElement.clientWidth || document.body.scrollLeft + document.body.clientWidth;
        cadreVisible.yMin = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        cadreVisible.yMax = window.pageYOffset + window.innerHeight || document.documentElement.scrollTop + document.documentElement.clientHeight || document.body.scrollTop + document.body.clientHeight;
        elementVisible.xMin = source.offsetLeft;
        elementVisible.yMin = source.offsetTop;
        while(sourceParent) {
                elementVisible.xMin += sourceParent.offsetLeft;
                elementVisible.yMin += sourceParent.offsetTop;
                sourceParent = sourceParent.offsetParent;
        }
        elementVisible.xMax = elementVisible.xMin + source.offsetWidth;
        elementVisible.yMax = elementVisible.yMin + source.offsetHeight;
        if(cadreVisible.xMin <= elementVisible.xMin && cadreVisible.xMax >= elementVisible.xMax){
                total.largeur = true;
        }
        else if(!(cadreVisible.xMax < elementVisible.xMin || cadreVisible.xMin > elementVisible.xMax)){
                partiel.largeur = true;
        }
        if(cadreVisible.yMin <= elementVisible.yMin && cadreVisible.yMax >= elementVisible.yMax){
                total.hauteur = true;
        }
        else if(!(cadreVisible.yMax < elementVisible.yMin || cadreVisible.yMin > elementVisible.yMax)){
                partiel.hauteur = true;
        }
        if(total.largeur && total.hauteur){
                return(id_element + ' est entièrement visible dans la page !');
        }
        else if(total.largeur && partiel.hauteur){
                return(id_element + ' est entièrement visible en largeur mais tronqué en hauteur');
        }
        else if(total.hauteur && partiel.largeur){
                return(id_element + ' est entièrement visible en hauteur mais tronqué en largeur');
        }
        else if(partiel.hauteur && partiel.largeur){
                return(id_element + ' est tronqué en hauteur et en largeur');
        }
        else{
                return(id_element + ' n\'est pas visible dans la page !');
        }
}
// ]] -->
</script> 
</head>
<body onload="document.getElementById('test').scrollIntoView(false)">
<div id="test" class="test">Div de test</div>
</body>
</html>

Compatiblité
Testé sur FF2, IE6 et IE7
EDIT :
Tests complémentaires sur FF3, Opera, Chrome et Safari concluants.

**sorown** · 01/05/2014, 00h47

Bonjour!!
je suis debutant en javascripte ,et merci pour ce script,
je veux que l'element d1 soit avec opacity=0 ,mais des qu'il est visible sur l'ecran l'opacity=1 , le probleme, c'est que je ne sais pas comment faire pour que ce changement d'opacity soit "slow" .

style.css

Code css :

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

1
2
3
4
5
6
7
8
9
.d1{
font-family:'Segoe UI';
font-SIZE: 16px;
color:#F2F9F7;
float:right;
margin-right:80px;
margin-top: 50px;
opacity:0;
}

index.html

Code html :

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

<div id="d1" class="d1" rel="500">Contacte et rencontre clients</div>

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
var element=document.getElementById('d1');
document.onscroll=function(){estVisible('d1')}
 
function estVisible(id_element){
    var cadreVisible = {xMin: 0, xMax: 0, yMin: 0, yMax: 0}, elementVisible = {xMin: 0, xMax: 0, yMin: 0, yMax: 0};
    var source = document.getElementById(id_element), sourceParent = source.offsetParent;
    var total = {hauteur: false, largeur: false}, partiel = {hauteur: false, largeur: false};
    cadreVisible.xMin = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
    cadreVisible.xMax = window.pageXOffset + window.innerWidth || document.documentElement.scrollLeft + document.documentElement.clientWidth || document.body.scrollLeft + document.body.clientWidth;
    cadreVisible.yMin = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    cadreVisible.yMax = window.pageYOffset + window.innerHeight || document.documentElement.scrollTop + document.documentElement.clientHeight || document.body.scrollTop + document.body.clientHeight;
    elementVisible.xMin = source.offsetLeft;
    elementVisible.yMin = source.offsetTop;
    while(sourceParent) {
        elementVisible.xMin += sourceParent.offsetLeft;
        elementVisible.yMin += sourceParent.offsetTop;
        sourceParent = sourceParent.offsetParent;
    }
    elementVisible.xMax = elementVisible.xMin + source.offsetWidth;
    elementVisible.yMax = elementVisible.yMin + source.offsetHeight;
    if(cadreVisible.xMin <= elementVisible.xMin && cadreVisible.xMax >= elementVisible.xMax){
        total.largeur = true;
    }
    else if(!(cadreVisible.xMax < elementVisible.xMin || cadreVisible.xMin > elementVisible.xMax)){
        partiel.largeur = true;
    }
    if(cadreVisible.yMin <= elementVisible.yMin && cadreVisible.yMax >= elementVisible.yMax){
        total.hauteur = true;
    }
    else if(!(cadreVisible.yMax < elementVisible.yMin || cadreVisible.yMin > elementVisible.yMax)){
        partiel.hauteur = true;
    }
    if(total.largeur && total.hauteur){
        source.style.opacity=1;
        return(id_element + ' est entièrement visible dans la page !');
    }
    else if(total.largeur && partiel.hauteur){
        return(id_element + ' est entièrement visible en largeur mais tronqué en hauteur');
    }
    else if(total.hauteur && partiel.largeur){
        return(id_element + ' est entièrement visible en hauteur mais tronqué en largeur');
    }
    else if(partiel.hauteur && partiel.largeur){
        return(id_element + ' est tronqué en hauteur et en largeur');
    }
    else{
        return(id_element + ' n\'est pas visible dans la page !');
    }
}

alors si vous pouvez m'aidez, merci d'avance

[SRC] Savoir si un élément est visible à l'écran

Contribuez

Discussions similaires

Partager

Partager