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

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

Contribuez

Vue hybride

Discussions similaires

Partager

Partager