2012-09-18 3 views
1

PHP/HTML 채팅 상자에서 자동 스크롤을 만드는 간단한 방법이 있습니까? 몇 가지 시도를했지만 페이지의 다른 .js 요소를 방해하여 결국 작동하지 않게되었습니다.PHP 자동 스크롤 문제 .js

채팅 상자의 실시간 코드를 보려면 여기를 클릭하십시오!

난 순간

// jQuery Document 
$(document).ready(function(){ 
//If user submits the form 
$("#submitmsg").click(function(){ 
    var clientmsg = $("#usermsg").val(); 
    $.post("post.php", {text: clientmsg});    
    $("#usermsg").attr("value", ""); 
    return false; 
}); 

//Load the file containing the chat log 
function loadLog(){  
    var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; 
    $.ajax({ 
     url: "log.html", 
     cache: false, 
     success: function(html){   
      $("#chatbox").html(html); //Insert chat log into the #chatbox div    
      var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; 
      if(newscrollHeight > oldscrollHeight){ 
       $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div 
      }    
     }, 
    }); 
} 
setInterval (loadLog, 2500); //Reload file every 2.5 seconds 

//If user wants to end session 
$("#exit").click(function(){ 
    var exit = confirm("Are you sure you want to end the session?"); 
    if(exit==true){window.location = 'index.php?logout=true';} 

}); 

})에서이 heres는 무엇;

답변

1

나는 당신이 당신의 스크롤 높이를 얻는다고 생각하지 않는다. 내가 FF로 명령 줄에 입력하려고 int 및 개체를 얻지 못했습니다.

스크롤 높이를 가져 오려고하지 마십시오. 더 아래로 스크롤 ... 그리고 그 이상.

$("#chatbox").animate({ scrollTop: 99999 }, 'normal'); 

저는 FF로 시도했지만 대부분의 브라우저에서 작동해야합니다. (". msgln") :

그런 다음, 당신의 성공 기능은 죽은 간단하다.

success: function(html){  $("#chatbox").animate({ scrollTop: 99999 }, 'normal'); 

      $("#chatbox").html(html); 
      $("#chatbox").animate({ scrollTop: 99999 }, 'normal'); 
}  

$는 마지막()() 오프셋 최고

+0

추신 :.. 내가 같은 오프셋하기로 feedling했다 오프셋 (offset)을 얻을 필요가 없다는 것을 깨닫기 전에 $ (".msgln"). last(). offset(). 위로 – Cedric

+0

와우 당신은 최고입니다. 나는 이것을 지금 시도 할 것이다! – uneducatedguy

+0

괜찮 았어. 다시 감사합니다! – uneducatedguy