채팅 보낼때마다 스크롤이 내려가게 script를 쓰고싶습니다.
본문
안녕하세요.
채팅 앱을 백앤드개발자분이 만들어주셨는데,
제가 스크립트로 채팅을 새로 치면, 스크롤이 맨아래로 내려가게 하고싶습니다.
아래 코드로 보시면은, 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>
답변 1
<style>
.chat_detail_ul{
height: 500px;
overflow: auto;
}
</style>
<script>
$('.chat_detail_ul').scrollTop($('.chat_detail_ul').prop('scrollHeight'));
</script>
메세지가들어오거나 보낼떄, 저스크립트를 넣어주시면되겠네요.
메세지를 보낼때를, 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'));
}
이렇게 하시면될텐데요.
메세지보낼떄도 똑같구요.
감사합니다정말 ㅠ
