scrollTop retourne toujours 0

**helkøwsky** · 02/01/2013, 14h00

Hello,

alors voilà mon problème, j'ai récupéré une fonction dans un très bon livre sur javascript (javascript by david flanagan), cette denrière permet de récupérer la distance en pixel de la barre scroll. Cependant je remarque que :

Code :

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

document.body.scrollTop

me retourne 0 à chaque fois. Sauf lorsque j'enlève dans l'entête de ma page le

Code html :

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

j'ai aussi essayé avec le doctype pour le html 5

Code html :

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

<!DOCTYPE html>

mais rien n'y fait il retourne toujours 0.

voici la fonction si jamais:

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
var Geometry = {};
 
 
if(document.body.clientWidth !== undefined) {
	Geometry.getViewportWidth =
		function() {return document.body.clientWidth;};
	Geometry.getViewportHeight =
		function() {return document.body.clientHeight;};
	Geometry.getHorizontalScroll =
		function() {return document.body.scrollLeft;};
	Geometry.getVerticalScroll =
		function() {return document.body.scrollTop;};
}
else if (	document.documentElement &&
			document.documentElement.clientWidth !== undefined){
	Geometry.getViewportWidth =
		function() {return document.documentElement.clientWidth;};
	Geometry.getViewportHeight =
		function() {return document.documentElement.clientHeight;};
	Geometry.getHorizontalScroll =
		function() {return document.documentElement.scrollLeft;};
	Geometry.getVerticalScroll =
		function() {return document.documentElement.scrollTop;};
}
else if	(window.innerWidth !== undefined)  {
	Geometry.getViewportWidth =
		function() {return window.innerWidth;};
	Geometry.getViewportHeight =
		function() {return window.innerHeight;};
	Geometry.getHorizontalScroll =
		function() {return window.pageXOffset;};
	Geometry.getVerticalScroll =
		function() {return window.pageYOffset;};
}

la structure de ma page :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
    <head>
        [...]
    </head>
 
    <body>
     [...]
<script type="text/javascript">
// ma fonction est placée ici
</script>
    </body>
</html>

**bigboomshakala** · 02/01/2013, 14h17

Bonjour,

Suivant le DOCTYPE, il faut utiliser

Code javascript :

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

document.documentElement.scrollTop

ou

Code javascript :

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

document.body.scrollTop

**Kaamo** · 02/01/2013, 14h44

Tu utilises Firefox ou IE ? Quand tu retires le DOCTYPE, le navigateur passe en mode "Quirks" !

Pour mémo :

Chrome et Safari : document.body.scrollTop
Firefox et IE (avec DOCTYPE) : document.documentElement.scrollTop
Firefox et IE (sans DOCTYPE, donc Quirks mode) : document.body.scrollTop

Donc comme tu dois utiliser document.body.scrollTop, il ne fonctionne qu'en mode Quirks pour IE et FF.

Code javascript :

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

1
2
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var scrolLeft = document.body.scrollLeft || document.documentElement.scrollLeft;

**helkøwsky** · 02/01/2013, 15h34

alors,

@bigboomshakala: Effectivement et ma fonction devrait donc se charger de prendre la bonne méthode (ce qui apparemment ne fonctionne pas).

@kaamo: D'accord en fait je sais donc où se situe mon problème, je vais donc changer la fonction. Merci pour ces indications je viens d'apprendre un nouveau truc.

scrollTop retourne toujours 0

JavaScript

Discussions similaires

Partager

Partager