채팅 보낼때마다 스크롤이 내려가게 script를 쓰고싶습니다. 채택완료
one9601
4년 전
조회 3,324
안녕하세요.
채팅 앱을 백앤드개발자분이 만들어주셨는데,
제가 스크립트로 채팅을 새로 치면, 스크롤이 맨아래로 내려가게 하고싶습니다.
아래 코드로 보시면은, 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개
채택된 답변
+20 포인트
4년 전
</p>
<p><style></p>
<p>.chat_detail_ul{
height: 500px;
overflow: auto;</p>
<p>}</p>
<p></style></p>
<p><script></p>
<p> $('.chat_detail_ul').scrollTop($('.chat_detail_ul').prop('scrollHeight'));</p>
<p></script></p>
<p>
메세지가들어오거나 보낼떄, 저스크립트를 넣어주시면되겠네요.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 5개
o
one9601
4년 전
메세지를 보낼때를, ul에 li가 추가될 때 마다로 지정하고싶은데 혹시 if문을 어떻게 써야할까요??ㅜ
P
Phillips
4년 전
아뇨
추가된후
$('.chat_detail_ul').scrollTop($('.chat_detail_ul').prop('scrollHeight'));
이스크립트를넣으시면되요.
추가된후
$('.chat_detail_ul').scrollTop($('.chat_detail_ul').prop('scrollHeight'));
이스크립트를넣으시면되요.
o
one9601
4년 전
아하.. 추가가 실시간으로 되는거라 ㅠ 알겠습니다 감사합니다
P
Phillips
4년 전
소켓아닌가요?
소켓이면
socket.onmessage = function(event) {
$('.chat_detail_ul').scrollTop($('.chat_detail_ul').prop('scrollHeight'));
}
이렇게 하시면될텐데요.
메세지보낼떄도 똑같구요.
소켓이면
socket.onmessage = function(event) {
$('.chat_detail_ul').scrollTop($('.chat_detail_ul').prop('scrollHeight'));
}
이렇게 하시면될텐데요.
메세지보낼떄도 똑같구요.
o
one9601
4년 전
감사합니다정말 ㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인