SIR
목록으로

채팅 보낼때마다 스크롤이 내려가게 script를 쓰고싶습니다. 채택완료

one9601
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전 조회 3,443
답변 1
목록

안녕하세요.

 

채팅 앱을 백앤드개발자분이 만들어주셨는데,

제가 스크립트로 채팅을 새로 치면, 스크롤이 맨아래로 내려가게 하고싶습니다.

아래 코드로 보시면은, ul 자식의 li가 새로 생길때마다 chat_detail_ul의 스크롤을 제일 하단으로 내려가게 하고싶습니다.

 

li가 추가될때마다 를 if문으로 하면 될거같은데..

도와주세요 ㅠ

 

<ul class="chat_detail_ul">

  <li class="chat_me"> 

    <div>채팅내용</div>

    <span> 내이름</span>

  </li>

  <li class="chat_you"> 

    <div>채팅내용</div>

    <span> 상대방이름</span>

  </li>

</ul>

#javascript #jquery #자바스크립트

답변 1개

채택된 답변
+20 포인트

Copy 
<style>

.chat_detail_ul{
    height: 500px;
    overflow: auto;

}

</style>

<script>

 $('.chat_detail_ul').scrollTop($('.chat_detail_ul').prop('scrollHeight'));

</script>

 

 

메세지가들어오거나 보낼떄, 저스크립트를 넣어주시면되겠네요.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 5개

메세지를 보낼때를, ul에 li가 추가될 때 마다로 지정하고싶은데 혹시 if문을 어떻게 써야할까요??ㅜ
아뇨
추가된후
$('.chat_detail_ul').scrollTop($('.chat_detail_ul').prop('scrollHeight'));
이스크립트를넣으시면되요.
아하.. 추가가 실시간으로 되는거라 ㅠ 알겠습니다 감사합니다
소켓아닌가요?

소켓이면

socket.onmessage = function(event) {
$('.chat_detail_ul').scrollTop($('.chat_detail_ul').prop('scrollHeight'));
}

이렇게 하시면될텐데요.
메세지보낼떄도 똑같구요.
감사합니다정말 ㅠ

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고