Mettre automatiquement la scroll bar en bas

**mortiimer** · 23/03/2016, 09h55

Bonjour/Bonsoir à tous !

J'ai un soucis avec Javascript qui n'en fait qu'à sa tête !

Dans mon code ci dessous, il y a deux exemples avec "le premier" qui fonctionne et le "second", lui ne fonctionne pas, à savoir sur la seconde div, je rafraîchi la div pour afficher le nouveau texte au fur et à mesure.

Page PHP : index.php

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
 
<!doctype html>
<html>
<head>
 
    <title>MortIImer Test Me!</title>
 
    <meta charset="UTF-8">
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
 
    <link href="./main.css" type="text/css" rel="stylesheet" media="all"/>
 
    <style>
 
        #chat_a, #chat_b{
            border: 1px solid #A5A5A5;
            width: 450px;
            height: 160px;
            background: #F7FBFF;
            overflow: auto;
        }
        .chat{
            padding:5px;
        }
 
    </style>
</head>
 
<body onload='refresh_div();'>
 
<div id="chat_a">
    <div class="chat">
 
        <?php
            $v = 1;
            $v_max = 50;
 
            while($v <= $v_max){
     
            echo $v.' - Fonctionne !<br />';
     
            $v++;
     
            }
        ?>
 
    </div>
</div>
 
<br />
 
<div id="chat_b">
    <div class="chat">
 
        <div id="refresh_header" ></div>
 
    </div>
</div>
 
</body>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
 
<script type="text/javascript">
 
    function refresh_div() {
 
    var xhr_object_header = null;
 
    if(window.XMLHttpRequest)
 
    { // Firefox
 
        xhr_object_header = new XMLHttpRequest();
 
    }
 
    else if(window.ActiveXObject)
 
    { // Internet Explorer
 
        xhr_object_header = new ActiveXObject('Microsoft.XMLHTTP');
 
    }
 
    var method = 'GET';
 
    var filename = './refresh_header.php';
 
    xhr_object_header.open(method, filename, true);
 
    xhr_object_header.onreadystatechange = function()
 
    {
 
        if(xhr_object_header.readyState == 4)
 
        {
 
            var tmp = xhr_object_header.responseText;
 
            document.getElementById('refresh_header').innerHTML = tmp;
 
        }
 
    }
 
    xhr_object_header.send(null);
 
    setTimeout('refresh_div()', 1000);
 
    }
 
</script>
 
<script type="text/javascript">
    element_a = document.getElementById('chat_a'); // Fonctionne
    element_a.scrollTop = element_a.scrollHeight;
 
    element_b = document.getElementById('chat_b'); // Ne Fonctionne Pas
    element_b.scrollTop = element_b.scrollHeight;
</script>
 
</html>

Page : refresh_header.php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<?php
    $v = 1;
    $v_max = 50;
 
    while($v <= $v_max){
     
        echo $v.' - Ne Fonctionne Pas<br />';
     
        $v++;
     
    }
?>

Si vous pouvez m'aider, je vous écoute ! Merci les ami(e)s !

**01001111** · 25/03/2016, 22h19

si j'ai bien compris ce que tu veux faire:
overflow:scroll en lieu et place d'overflow:auto est ce que tu recherches.

Code css :

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

1
2
3
4
5
6
7
8
 
#chat_a, #chat_b{
            border: 1px solid #A5A5A5;
            width: 450px;
            height: 160px;
            background: #F7FBFF;
            overflow: scroll;
}

**mortiimer** · 26/03/2016, 16h05

Non le "scroll" est inadapté à la situation, je ne sais pas si tu as essayé le code, mais tu as pu remarquer que le "chat_a", le scroll bar se met bien en bas comme demander avec le javascript, et le "chat_b" lui ne se met pas en bas.

**01001111** · 26/03/2016, 17h02

j'ai essayé, et ça met de mon côté le scroll sur les deux en x comme en y.
n'as-tu vraiment rien changé dans le code?

on peut aussi définir les propriétés séparément en x et y avec les propriétés overflow-x et overflow-y.
Nom : Capture d’écran 2016-03-26 à 17.00.05.png
Affichages : 2950
Taille : 37,2 Ko

Nom : Capture d’écran 2016-03-26 à 17.00.05.png
Affichages : 2950
Taille : 37,2 Ko

S'il n'y a pas de débordement, l'overflow:scroll affiche un "placeholder" (quelque chose qui prend la place de la barre habituelle), c'est tout à fait normal.

**mortiimer** · 26/03/2016, 17h24

C'est pas les scrolls qui posent problème, c'est volontaire, c'est pour faire un Chat.
Mais la div qui accueil les messages du chat en question est configuré, étant le "chat_b" pas le "chat_a".
Car le "chat_a" lui ne se rafraichi pas, le "chat_b" si.

Je veux faire en sorte que le scroll est en bas, quand on charge la page, le scroll de "chat_a" est bien en bas, pas celui de "chat_b". C'est justement là qu'il est mon problème.

Comment faire en sorte que le scroll du "chat_b" soit en bas comme le "chat_a" qui utilise les mêmes codes, les mêmes paramètres, sauf que le "chat_a" est inclu dans la page et que le "chat_b" lui est importé dans une div.

**01001111** · 26/03/2016, 18h37

Ah, désolé, je n'avais pas bien compris ta question.
En fait tu veux que le scrollTop se positionne correctement sur la barre verticale.

C'est tout à fait normal que ça ne marche pas puisque tu importes les contenus dans la div d'id "refresh_header"
Supprime celui-ci et mets les contenus dans chat_b, tu auras bien moins de difficultés.
Ou bien mets sur la div d'id refresh_header une hauteur auto et un positionnement relatif.

Mettre automatiquement la scroll bar en bas

JavaScript

Vue hybride

Discussions similaires

Partager

Partager