Défilement d'un chat dernier message sur le bas

Version imprimable

Bonjour voilà j'essaye de faire défiler les derniers messages d'un chat par le bas .

premier script celui si affiche bien les messages entre div

Code:

1
2
3
4
5
6
7
8
var auto_refresh = setInterval(
function()
{
    $('#mondiv').load('tchat_lu.php',function() {
    $('#mondiv').scrollTop($('#mondiv')[0].scrollHeight);
 
    });
}, 2000);

deuxième lui rien

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var auto_refresh = setInterval(
function() {
  // initialise le scroll au bas de l'élément
  $('#mondiv').load('tchat_lu.php',function() {
  $("#mondiv")[0].scrollTop = $("#mondiv")[0].scrollHeight;
 
    var box = $("#mondiv")[0];
 
    // on vérifie si le scroll est en bas de l'élément
    var toBottom = box.offsetHeight + box.scrollTop >= box.scrollHeight;
 
    // on ajoute le message
    $("#mondiv").append('\nnouvelle ligne');
 
    // si le scroll était en bas avant l'ajout du message, on scroll vers le bas
  	if (toBottom) {
  		$("#mondiv").animate({scrollTop: $("#mondiv")[0].scrollHeight);
      console.log('scroll down');
 
	}
  };2000);
});

Code:

1
2
3
4
5
6
7
8
9
var
  jObjMonDiv = $( '#mondiv' ),
  auto_refresh = setInterval( function(){
    jObjMonDiv.load( 'tchat_lu.php', function(){
      jObjMonDiv
        .append( '<p>nouvelle ligne</p>' )
        .scrollTop( jObjMonDiv[0].scrollHeight ); 
    });
  }, 3000 );

02/04/2016, 21h10
speedylol
bonjour je sais pas si je trouverais la bonne solutions ici mais je cherche une solution, pour un chat que les dernier message s' ajoute du bas vers le haut
Code:

1 2 3 4 5 6 7 8 9 var auto_refresh = setInterval( function() { $('#mondiv').load('tchat_lu.php',function() { ('#mondiv').scrollTop($('#mondiv')[0].scrollHeight); }); }, 2000);
Note de la modération : message ajouté suite à déplacement.

Bonjour, merci de ta réponse mais je viens de tester la partie de ton script cela ne fonctionne pas pour l'affichage des messages.

voilà celui de base que j'avais réalisé et lui m'affiche tout les messages.

les nouveaux vers les bas les anciens vers le haut)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
	function loadLog(){		
		var oldscrollHeight = $("#mondiv").attr("scrollHeight") - 20; 
		$.ajax({
			url: "tchat_lu.php",
			cache: false,
			success: function(html){		
				$("#mondiv").html(html); 	
 
				//Auto-scroll			
				var newscrollHeight = $("#mondiv").attr("scrollHeight") - 20; // ScrollHeight après la demande
				if(newscrollHeight > oldscrollHeight){
					$("#mondiv").animate({ scrollTop: newscrollHeight }, 'normal'); // Défilement automatique en bas de div
				}				
		  	},
		});
	}
setInterval (loadLog, 2500);

02/04/2016, 23h32
speedylol

bonjour je suis pas loin de la solutions le scroll bar doit être en dessous la il remonte a chaque message

Voilà j'ai trouvé ;-)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function loadLog(){	
       var oldscrollHeight = $("#mondiv")[0].scrollHeight;
       $.ajax({
		   url: "tchat_lu.php",
		   cache: false,
		   success: function(html){		
				$("#mondiv").html(html);
 
    var newscrollHeight = $("#mondiv")[0].scrollHeight;
    if(newscrollHeight > oldscrollHeight){ 
        $("#mondiv").scrollTop($("#mondiv")[0].scrollHeight);
		} 
    },
 
  });
}
setInterval (loadLog, 2000);