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 : 2719
Taille : 37,2 Ko

Nom : Capture d’écran 2016-03-26 à 17.00.05.png
Affichages : 2719
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.

**mortiimer** · 26/03/2016, 18h55

J'ai déjà essayé beaucoup de chose, mais au final rien ne fonctionne, ta solution ne fonctionne pas non plus.
De plus c'est le paramètre "#chat_b" dans le CSS qui tient compte du "overflow: auto;", donc de la div "<div id="chat_b"><br />" et théoriquement, tout se qui à dedant dépassant les 450px de hauteur devrait activé le "overflow: auto;" qui lui devrait se mettre automatiquement en bas avec le JS. Chose qui fonctionne que pour "chat_a" mais pas pour "chat_b".

Donc le code :

Code :

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

1
2
3
 
element_b = document.getElementById('chat_b'); // Ne Fonctionne Pas
element_b.scrollTop = element_b.scrollHeight;

ne fonctionne pas avec des div dynamique, donc comment faire pour avoir le scroll en bas sur le "chat_b" ? Telle est la question.

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

Ce n'est pas un code dynamique, tel un écouteur.
il faut l'appliquer à chaque requête ajax. Essaie d'ajouter la partie concernant chat_b
après le code suivant:

Code javascript :

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

1
2
 
document.getElementById('refresh_header').innerHTML = tmp;

**mortiimer** · 26/03/2016, 19h07

Cette solution fonctionne, on à résolu le problème à 50% merci, mais on ne peut plus lire les anciens messages pour le coup,

Je m'explique, le scroll se remet en bas toute les secondes ducoup, quand on essaye de le bouger pour lire le texte, il se remet automatiquement en bas.

**01001111** · 26/03/2016, 19h11

il faut que tu permettes de le débrayer sur une action de l'utilisateur:

en gros sur l'évènement onscroll, tu mets un booléen (true ou false) sur true.
si ce booléen est sur true, tu n'exécutes pas le script que tu as rajouté dans l'appel ajax.

le top après c'est de remettre le booléen sur false quand sur onscroll le scrollTop est égal au scrollHeight, c'est à dire quand l'utilisateur a fait défiler de nouveau vers le bas

**mortiimer** · 26/03/2016, 19h15

Houla

je ne suis pas assez doué pour faire ce type de code pour le moment, je débute en JS ^^ je n'ai pas encore vu cette partie là. Je vais voir ce que je peux faire du coup.

**01001111** · 26/03/2016, 19h19

ce n'est pas compliqué! si tu as besoin d'aide, dis-le !

**mortiimer** · 26/03/2016, 19h22

Voilà comment je vois les choses :

Quand le scroll est en bas, la boolean est sur TRUE qui active le JS, quand l'utilisateur le déplace, on met la boolean sur FALSE,

Mais, comment on récupère ses valeurs là ??? il y a des langages qui me parle, mais le JS, c'est autre chose ! ^^

**01001111** · 26/03/2016, 19h39

C'est exactement ça !
la méthode addEventListener permet d'accéder à l'évènement scroll:

Code javascript :

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

1
2
 
element_b.addEventListener("scroll", maFonctionDeTest);// à ne déclarer qu'une seule fois et en dehors de l'appel ajax

pour la portée des variables, la base en javascript:
une variable déclarée avec le mot clé var dans une function n'est accessible que depuis celle-ci.
une variable déclarée avec ou sans le mot clé var en dehors de toute fonction, est accessible de partout, elle est enfant de window.

tu auras aussi besoin de l'opérateur de comparaison == pour tester si le scroll est en bas ou non

Je passe sur les fermetures et les nouvelles fonctions d'ECMA 6 (pas encore globalement suppportées) car tu n'en as pas besoin ici.

**mortiimer** · 26/03/2016, 20h02

J'ai trouvé ça que j'essaye de modifier :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function scollPos() {
            var div = document.getElementById("myDiv").scrollTop;
            document.getElementById("pos").innerHTML = div;
        }
    </script>
</head>
<body>
    <form id="form1">
    <div id="pos">
    </div>
    <div id="myDiv" style="overflow: auto; height: 200px; width: 200px;" onscroll="scollPos();">
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
        Place some large content here<br />
    </div>
    </form>
</body>
</html>

C'est parfait pour détecté si le scroll est en haut ou en bas, mais je n'arrive pas à inverser les valeurs: dans ce code, le haut du scroll à pour valeur = 0, et dans on le met vers le bas, il prend de la valeur, mais pour notre problème, il faudrait que le bas ai pour valeur = 0. Comment y proceder ? Merci

**01001111** · 26/03/2016, 20h36

essaie avec ceci stp:

Code php :

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
125
126
127
128
129
130
131
132
133
134
135
 
<!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;
 
                if (autoscroll) {
                        element_b = document.getElementById('chat_b'); // Ne Fonctionne Pas
                        element_b.scrollTop = element_b.scrollHeight;
                }
 
        }
 
    }
 
    xhr_object_header.send(null);
 
    setTimeout('refresh_div()', 1000);
 
    }
    var autoscroll=true;
    $('#chat_b').scroll(onscroll);
    function onscroll(event) {
 
        if (event.target.scrollHeight - event.target.scrollTop === event.target.clientHeight) {
                autoscroll=true;
        } else {
                autoscroll=false;
        }
    }
    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>

**mortiimer** · 27/03/2016, 11h20

Salut, j'ai supprimé les lignes 131 & 132 :

Code :

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

1
2
3
 
element_b = document.getElementById('chat_b'); // Ne Fonctionne Pas
element_b.scrollTop = element_b.scrollHeight;

Et sinon ça fonctionne nickel, tu es vraiment doué ! Mille merci l'ami.

**01001111** · 27/03/2016, 19h27

De rien ! Plaisir d'offrir!

Mettre automatiquement la scroll bar en bas

JavaScript

Discussions similaires

Partager

Partager