2012-04-17 3 views
2

안녕하세요, 저는 장고에 간단한 chatbox를 구현하려고하고 javascript를 사용하여 div 클래스의 맨 아래로 스크롤하는 방법을 궁금해하십니까? 기본적으로 페이지가로드 될 때 가장 최근의 메시지가 아닌 가장 최근의 메시지를 사용자가 볼 수 있도록하고 싶습니다.div 클래스의 맨 아래에 자바 스크립트 스크롤

답변

1

최근 비슷한 일을해야했습니다. 요소를 화면에 부드럽게 스크롤 할 수있는 기본 jquery 플러그인을 찾았습니다. 다음과 같이 사용된다

(function($) { 

    $.fn.scrollMinimal = function() { 

    var cTop = this.offset().top; 
    var cHeight = this.outerHeight(true); 
    var windowTop = $(window).scrollTop(); 
    var visibleHeight = $(window).height(); 

    if (cTop < windowTop) { 
     $('body').animate({'scrollTop': cTop}, 'slow', 'swing'); 
    } else if (cTop + cHeight > windowTop + visibleHeight) { 
     $(jQuery.browser.webkit ? "body": "html") 
     .animate({'scrollTop': cTop - visibleHeight + cHeight}, 'slow', 'swing'); 
    } 
    }; 

}(jQuery)); 

:

이 같은 스크립트가 필요하므로
$('#chat').scrollMinimal(); 
0

음, 기본 스크립트는 scrollHeight에 scrollTop이 동일하게 설정되어에만

var DIV = document.getElementById('theDIVElement'); 
DIV.scrollTop = DIV.scrollHeight; 

당신을 DIV ID로 theDIVElement을 변경해야합니다.

+0

좋습니다. 좋습니다. id 클래스뿐만 아니라 div 클래스에서도 작동합니까? –

+0

@MarsJ 글쎄, 당신은 단지 요소를 지역화하기 위해'getElementsByClassName' 함수를 사용해야합니다. 필수적인 부분은 두 번째 줄입니다. –

0

이것은 내가 내 채팅에서 사용되는 스크립트입니다 : 당신은 너무 빨리 아래로 스크롤 경우는, 새 메시지가 추가되는 경우에도 좋은

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
function myScroll() { 
    window.scrollBy(0,01) 
    setTimeout('myScroll()',100); } 
if (document.layers || document.all) 
    myScroll() 
//--></SCRIPT> 

당신이있는 동안, 당신의 눈에 어렵다 읽으려고.

관련 문제