변경하기 기본 사업부 스크롤-X 동작

Question

는

.dialog_container{ 

    width: 100%; 
    height: 500px; 

} 

새로운 사업부 메시지 컨테이너에 추가됩니다 사업부가있다. 하지만 기본 컨테이너가 가질 수있는 요소보다 더 많은 요소가있을 때 상단에서 스크롤하고 확장 할 수 있도록 반대쪽을 원한다. 메신저 등에서 주류 디자인입니다.

어떻게 구현할 수 있습니까? Google은 사용자 정의 스크롤 탭과 물건을 만드는 일부 플러그인을 지원했습니다.

Answer 1

div의 높이를 잡고 싶다면 animate scrollTop을 사용하여 전체 높이를 애니메이션화하십시오.

jQuery를

$(".append").on("click", function(e) { 
    e.preventDefault(); 
    $(".messages-container").append("<p>I'm a new message</p>"); 

    //Relevant jQuery start 
    var height = $(".messages-container")[0].scrollHeight; 
    $(".messages-container").animate({ 
    scrollTop: height 
    }); 
    //Relevant jQuery end 
}); 

HTML

<div class="messages-container"> 

</div> 
<button class="append"> 
Append Message 
</button> 

바이올린 : https://jsfiddle.net/calder12/nasrk4fk/ 당신의 정확한 요구 사항은 무엇