Scroll dans un chat ajax

[TYBMHI]

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

 

[sparh]

Bonjour

peux être une idée avec l’événement scroll de jquery (mais je ne suis pas un spécialiste en js non plus!).

 

var is_scrolled = 'no';
$(document).ready(function() {

// désactive le scroll automatique car l'utilisateur à bougé lui même le scroll
$(document).on("scroll",'#message_box', function() {  is_scrolled = 'yes'; }); 

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

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

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

});
}, 3000);

});

 

Après il faudra trouver une solution pour réactiver le scroll automatique en remettant is_scrolled = 'no'; (peux être au bout d'un certain temps ou si l'utilisateur scroll de lui même en bas de #message_box)

 

Bonne journée

 

Modifié 23 Décembre 2015 par sparh

[TYBMHI]

Bonjour et merci pour ton aide Sparh ! Voici le code final qui fonctionne.

 

<script type="text/javascript">
$(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);
	
	//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>