[JavaScript] [SRC]/[FAQ] Savoir si la scrollBar d'un controle est en bas

FremyCompany · 23/05/2007, 19h34

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
<html><body onload="
    setInterval(function() {
        var h = document.getElementById('h');
        var d = document.getElementById('textEdit1');
        h.value = (d.scrollTop + d.clientHeight - d.scrollHeight) + 'px';
    }, 10)
">
    Position du scroll (apd. du bas) : <input style="border: none; width: 75px;" readonly="true" type="text" id="h" />
    <div class="textEdit" id="textEdit1" style="height: 300px; width: 300px; overflow: auto; border: inset" ContentEditable="true">
        ..........................................................................................................................................................................................................................................................
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    </div>
 
    <style type="text/css"><!--
        .textEdit p {
            margin: 0px;
        }
    --><style>
</body></html>

La partie intéressante du code étant :

Code :

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

1
2
// Soit "d" un objet HTML (ici une balise DIV)
(d.scrollTop + d.clientHeight - d.scrollHeight)

PS: Cet exemple se comportera de manière un peu différente entre IE et FF dans la mesure où l'on pourra changer le contenu de la DIV avec IE mais pas avec FF

FremyCompany · 23/05/2007, 19h41

Attention, je viens de constater un problème de compatibilité avec OPERA dans le cas ou la DIV possède une scrollBar horizontale...

Dans ce cas, la valeur obtenue est -17 au lieu de 0, et donc le code ne peut pas fonctionner... Bon ben la faut faire un test particulier pour OPERA

cerede2000 · 23/05/2007, 20h23

Pas moins -17, mais -16. Sinon fichu Opera quand meme avec son JS limité...

FremyCompany · 23/05/2007, 20h59

Citation:

Envoyé par cerede2000

Pas moins -17, mais -16. Sinon fichu Opera quand meme avec son JS limité...

Ah, x

FremyCompany · 23/05/2007, 21h02

Citation:

Envoyé par cerede2000

Pas moins -17, mais -16. Sinon fichu Opera quand meme avec son JS limité...

Ah, ça c'est ennuyeux, car chez moi c'est -17, je suis formel...

Ben on peut essayer de remplacer clientHeight par offsetHeight, si ca marche pas, alors tant pis pour opéra

cerede2000 · 23/05/2007, 21h36

Ah oui ennuyeux si on a pas la meme valeur sur Opera plus galere :S Moi j'ai -16 formel aussi

Citation:

Ben on peut essayer de remplacer clientHeight par offsetHeight, si ca marche pas, alors tant pis pour opéra

La du coup j'obtient 6 :S

FremyCompany · 23/05/2007, 21h58

1) Si ca marchais sur OPERA, il aurait fallu faire un test rien que pour lui, vu que offsetH tient compte de la scrollBar et renvoie donc 23 sur FF et 25 sur IE, ce qui ne marche pas

2) Sur OPERA, je crois que ca marche, mais que ca compte les bordures (ben oui, forcément 3 au dessus et 3 en dessous ca fait 6), vu que si je mets border: none, ca marche...

==> Si on veut, on peut y arriver avec opéra, mais cela reste plus difficile qu'avec le reste et surtout... ca demande d'allonger le code

Code :

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

1
2
3
4
5
6
7
// PSEUDO-CODE
if (OPERA) {
   H = (offsetH - borderH)
} else {
   H = clientH
}
return (scrollTop + H - scrollHeight);

cerede2000 · 23/05/2007, 22h16

J'ai mit ceci:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
setInterval(function() {
		var h = document.getElementById('h');
		var d = document.getElementById('textEdit1');
		if(navigator.appName == 'Opera') {
			H = (d.offsetHeight - d.borderHeight);
		}
		else {
			H = d.clientHeight;
		}
		h.value = (d.scrollTop + H - d.scrollHeight) + 'px';
		}, 10)

Opera me dit: NaNpx, il aime pas quoi?

Edit: Arf, d.borderHeight undefined ...

FremyCompany · 24/05/2007, 18h15

ah oui, je te l'ai dit, c'est du pseudo-code, borderHeight, ca n'existe pas

Faut le calculer àpd du currentStyle.border(Bottom/Top)Width, ...

cerede2000 · 24/05/2007, 19h19

Eu tu pourrai etre plus précis pour le calcul

Merci

FremyCompany · 24/05/2007, 21h33

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var borderHeight = 0;
switch (d.currentStyle.borderTopWidth) {
  case "": 
    break;
  case "thin":
    borderHeight+=1; break;
  case "medium":
    borderHeight+=3; break;
  case "large":
    borderHeight+=6; break;
  default:
    borderHeight+=parseInt(d.currentStyle.borderTopWidth); break;
}

Pis tu fais la même chose pour borderBottomWidth et tu regarde ce que cela donne

cerede2000 · 24/05/2007, 22h20

Ca a l'air pas trop mal:

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
setInterval(function() {
		var h = document.getElementById('h');
		var d = document.getElementById('textEdit1');
		if(navigator.appName == 'Opera') {
			var borderHeight = 0;
			switch(d.currentStyle.borderTopWidth) {
				case '':
				break;
				case 'thin':
					borderHeight+=1;
				break;
				case 'medium':
					borderHeight+=3;
				break
				case 'large':
					borderHeight+=6;
				break;
				default:
					borderHeight+=parseInt(d.currentStyle.borderTopWidth);
				break;
			}
			H = (d.offsetHeight - borderHeight);
			alert(borderHeight);
		}
		else {
			H = d.clientHeight;
		}
		h.value = (d.scrollTop + H - d.scrollHeight) + 'px';
		}, 10) "

Par contre j'ai encore un decalage de 3px... D'ou peut il venir

Apparemment en doublant borderHeight c'est bon

ce qui parrait logique, 1 en haut et 1 en bas

FremyCompany · 25/05/2007, 16h45

Soit doubler, soit faire le même calcul pour borderBottomWidth (on sait jamais, ils peuvent avoir des tailles différentes)

cerede2000 · 25/05/2007, 17h25

Bien donc voici le code qui marche pour FF, IE et Opera

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
 
setInterval(function() {
	var h = document.getElementById('h');
	var d = document.getElementById('textEdit1');
	if(navigator.appName == 'Opera') {
		var borderHeight = 0;
		switch(d.currentStyle.borderTopWidth) {
			case '':
			break;
			case 'thin':
				borderHeight+=1;
			break;
			case 'medium':
				borderHeight+=3;
			break
			case 'large':
				borderHeight+=6;
			break;
			default:
				borderHeight+=parseInt(d.currentStyle.borderTopWidth);
			break;
		}
		switch(d.currentStyle.borderBottomWidth) {
			case '':
			break;
			case 'thin':
				borderHeight+=1;
			break;
			case 'medium':
				borderHeight+=3;
			break
			case 'large':
				borderHeight+=6;
			break;
			default:
				borderHeight+=parseInt(d.currentStyle.borderBottomWidth);
			break;
		}
		H = (d.offsetHeight - borderHeight);
	}
	else {
		H = d.clientHeight;
	}
	h.value = (d.scrollTop + H - d.scrollHeight) + 'px';
}, 10)

FremyCompany · 25/05/2007, 18h30

Parfait !
Si qqun pouvait tester sous safari...

23/05/2007, 19h41	#2
FremyCompany Expert Confirmé Étudiant Inscription : février 2006 Messages : 2 532 Détails du profil Informations personnelles : Âge : 20 Informations professionnelles : Activité : Étudiant Informations forums : Inscription : février 2006 Messages : 2 532 Points : 2 903 Points : 2 903	Attention, je viens de constater un problème de compatibilité avec OPERA dans le cas ou la DIV possède une scrollBar horizontale... Dans ce cas, la valeur obtenue est -17 au lieu de 0, et donc le code ne peut pas fonctionner... Bon ben la faut faire un test particulier pour OPERA __________________ Fremy Pour vos développements Web et une navigation agréable, le tout gratuit : 1) IE 8 + IE7Pro (Si vous ne connaissez pas IE7Pro, essayez !) 2) FF 3 + Web Developper Toolbar + AdBlockPlus + FireBug + GreaseMonkey
	00

24/05/2007, 18h15	#9
FremyCompany Expert Confirmé Étudiant Inscription : février 2006 Messages : 2 532 Détails du profil Informations personnelles : Âge : 20 Informations professionnelles : Activité : Étudiant Informations forums : Inscription : février 2006 Messages : 2 532 Points : 2 903 Points : 2 903	ah oui, je te l'ai dit, c'est du pseudo-code, borderHeight, ca n'existe pas Faut le calculer àpd du currentStyle.border(Bottom/Top)Width, ... __________________ Fremy Pour vos développements Web et une navigation agréable, le tout gratuit : 1) IE 8 + IE7Pro (Si vous ne connaissez pas IE7Pro, essayez !) 2) FF 3 + Web Developper Toolbar + AdBlockPlus + FireBug + GreaseMonkey
	00

25/05/2007, 16h45	#13
FremyCompany Expert Confirmé Étudiant Inscription : février 2006 Messages : 2 532 Détails du profil Informations personnelles : Âge : 20 Informations professionnelles : Activité : Étudiant Informations forums : Inscription : février 2006 Messages : 2 532 Points : 2 903 Points : 2 903	Soit doubler, soit faire le même calcul pour borderBottomWidth (on sait jamais, ils peuvent avoir des tailles différentes) __________________ Fremy Pour vos développements Web et une navigation agréable, le tout gratuit : 1) IE 8 + IE7Pro (Si vous ne connaissez pas IE7Pro, essayez !) 2) FF 3 + Web Developper Toolbar + AdBlockPlus + FireBug + GreaseMonkey
	00

25/05/2007, 18h30	#15
FremyCompany Expert Confirmé Étudiant Inscription : février 2006 Messages : 2 532 Détails du profil Informations personnelles : Âge : 20 Informations professionnelles : Activité : Étudiant Informations forums : Inscription : février 2006 Messages : 2 532 Points : 2 903 Points : 2 903	Parfait ! Si qqun pouvait tester sous safari... __________________ Fremy Pour vos développements Web et une navigation agréable, le tout gratuit : 1) IE 8 + IE7Pro (Si vous ne connaissez pas IE7Pro, essayez !) 2) FF 3 + Web Developper Toolbar + AdBlockPlus + FireBug + GreaseMonkey
	00

23/05/2007, 20h23	#3
cerede2000 Membre expérimenté Étudiant Inscription : juillet 2004 Messages : 777 Détails du profil Informations personnelles : Âge : 25 Informations professionnelles : Activité : Étudiant Informations forums : Inscription : juillet 2004 Messages : 777 Points : 527 Points : 527	Pas moins -17, mais -16. Sinon fichu Opera quand meme avec son JS limité...
	00

24/05/2007, 19h19	#10
cerede2000 Membre expérimenté Étudiant Inscription : juillet 2004 Messages : 777 Détails du profil Informations personnelles : Âge : 25 Informations professionnelles : Activité : Étudiant Informations forums : Inscription : juillet 2004 Messages : 777 Points : 527 Points : 527	Eu tu pourrai etre plus précis pour le calcul Merci
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email