Problème de scroll avec un chat ajax

Fermé
tybmhi Messages postés 200 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 18 septembre 2017 - 23 déc. 2015 à 10:28
tybmhi Messages postés 200 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 18 septembre 2017 - 23 déc. 2015 à 12:26
Bonjour à tous,

Je tente d'insérer un chat sur mon site web. J'ai réussi à le créer mais un problème persiste depuis deux jours. Lorsque le chat s'ouvre, pas de problème, le scroll revient vers le bas. D'ailleurs il revient vers le bas à chaque rafraichissement du contenu (toutes les 3 secondes). Et c'est bien là mon problème. Je souhaiterais que lorsque le "chatteur" monte le scroll pour lire les messages précédents ne soit pas embêté par le retour automatique du scroll. En fait, j'aimerais que le scroll ne revienne pas en bas si l'internaute l'a déplacé lui-même. Je crois qu'il faut tester la position du scroll et faire une condition en Javascript. Mais là j'avoue que ça dépasse très largement mes compétences. Si quelqu'un peut m'aider... Je vous remercie d'avance. Voici le code : 


<script type="text/javascript">
$(document).ready(function() {

$('.toggle_chat').hide();


// load messages every 1000 milliseconds from server.
load_data = {'fetch':1};
window.setInterval(function(){
$.post('chatbox/shout.php', load_data, function(data) {
$('.message_box').html(data);


$("#message_box").animate({scrollTop: $("#message_box")[0].scrollHeight},2000);//Autoscroll to bottom of div


});
}, 3000);

//method to trigger when user hits enter key
$("#shout_message").keypress(function(evt) {
if(evt.which == 13) {

var imessage = $('#shout_message').val();
post_data = {'message':imessage};

//send data to "shout.php" using jQuery $.post()
$.post('chatbox/shout.php', post_data, function(data) {

//append data into messagebox with jQuery fade effect!
$(data).hide().appendTo('.message_box').fadeIn();

//keep scrolled to bottom of chat!
$("#message_box").animate({scrollTop: $("#message_box")[0].scrollHeight},2000);//Autoscroll to bottom of div

//reset value of message box
$('#shout_message').val('');

}).fail(function(err) {

//alert HTTP server error
alert(err.statusText);
});
}
});

//toggle hide/show shout box
$(".open_btn").click(function (e) {
//get CSS display state of .toggle_chat element
var toggleState = $('.toggle_chat').css('display');

//toggle show/hide chat box
$('.toggle_chat').slideToggle();

//use toggleState var to change close/open icon image
if(toggleState == 'block')
{
$(".header div").attr('class', 'open_btn');
}else{
$(".header div").attr('class', 'close_btn');
}


});
});

</script>

A voir également:

2 réponses

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
23 déc. 2015 à 11:30
Salut,

Un exemple de début de solution possible : https://jsfiddle.net/ozumte4r/

L'idée est de simplement vérifier que la position du scroll est tout en bas de l'élément #id_message et d'effectuer le scroll après l'ajout du message seulement si celui-ci était déjà en bas.

Bonne journée
0
tybmhi Messages postés 200 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 18 septembre 2017 12
23 déc. 2015 à 11:47
Merci beaucoup Pitet, ça fonctionne !! En revanche, j'ai une question : à quoi sert la ligne
console.log('scroll down');


Car lorsqu'elle est présente j'ai du mal à remonter le scroll en manuel alors que lorsque je la retire, aucun problème.

Nouveau code pour d'autres utilisateurs :


$(document).ready(function() {

$('.toggle_chat').hide();
$("#message_box")[0].scrollTop = $("#message_box")[0].scrollHeight;

// load messages every 3000 milliseconds from server.
load_data = {'fetch':1};
window.setInterval(function(){

var box = $("#message_box")[0];
// on vérifie si le scroll est en bas de l'élément
var toBottom = box.offsetHeight + box.scrollTop >= box.scrollHeight;



$.post('chatbox/shout.php', load_data, function(data) {
$('.message_box').html(data);


if (toBottom) {
$("#message_box").animate({scrollTop: $("#message_box")[0].scrollHeight},2000);
}


});
}, 3000);

--
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
23 déc. 2015 à 12:25
La commande console.log() permet d'afficher des informations dans la console de développement du navigateur. Elle est utilisée uniquement pour faire du débug et tu dois effectivement la supprimer puisqu'elle ne sert à rien pour le code final.
0
tybmhi Messages postés 200 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 18 septembre 2017 12
23 déc. 2015 à 12:26
Merci pour cette réponse rapide et très claire !
0