[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

Envoyé par cerede2000

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

Ah, x

**FremyCompany** · 23/05/2007, 21h02

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

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

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

Contribuez

Discussions similaires

Partager

Partager