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

Version imprimable

Code:

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:

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

23/05/2007, 19h41
FremyCompany

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
23/05/2007, 20h23
cerede2000

Pas moins -17, mais -16. Sinon fichu Opera quand meme avec son JS limité...
23/05/2007, 20h59
FremyCompany

Citation:

Envoyé par cerede2000

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

Ah, x
23/05/2007, 21h02
FremyCompany

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 :?
23/05/2007, 21h36
cerede2000

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
23/05/2007, 21h58
FremyCompany
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:

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

J'ai mit ceci:

Code:

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

24/05/2007, 18h15
FremyCompany

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, ...
24/05/2007, 19h19
cerede2000

Eu tu pourrai etre plus précis pour le calcul :D
Merci

Code:

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 ;)

Ca a l'air pas trop mal:

Code:

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 :D ce qui parrait logique, 1 en haut et 1 en bas :)

25/05/2007, 16h45
FremyCompany

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

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

Code:

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)

25/05/2007, 18h30
FremyCompany

Parfait !
Si qqun pouvait tester sous safari...