JavaScript, jQuery
Textarea 내용 추가 시 아래로 자동 스크롤
수알치
2021. 11. 15. 01:02
출처: https://nine01223.tistory.com/253 [스프링연구소(spring-lab)]
Textarea 내용 추가 시 아래로 자동 스크롤
정리. 수알치 오상문
채팅방에서 textarea를 이용할 때 내용이 하단에 추가되어도 스크롤바가 아래로 내려가지 않아서 직접 스크롤바를 하단으로 내려야 추가 메시지를 볼 수 있습니다. 텍스트영역에 값을 추가할 때 아래 자바스크립가 동작하도록 하면 스크롤바가 자동으로 내려갑니다.
document.getElementById("chat-textarea").scrollTop = document.getElementById("chat-textarea").scrollHeight;
참조한 내용에서는 IE에서만 동작한다고 하는데 제가 테스트할 때는 크롬에서도 동작했습니다.
아래는 실제 적용한 소스 코드 예입니다.
<!DOCTYPE HTML>
<html lang="ko">
<head>
<title>대화방</title>
</head>
<body>
<div style="margin:1rem;"></div>
대화 내용
<textarea id="chat-log" cols="40" rows="20" readonly
style="margin:0.2rem 0 1rem 0; border:solid 1px black;"></textarea><br/>
메시지 입력
<input id="chat-message-input" type="text" size="38"
style="margin:0.2rem 0 0.5rem 0; height:2rem; border:solid 1px black;"/> <br/>
<input id="chat-message-submit" class="btn btn-primary btn-sm" type="button"
style="width:80px;" value="보내기"/>
<input id="username" type="hidden" value="{{user.username}}"/>
<script>
var roomName = {{ room_name_json }};
var chatSocket = new WebSocket(
'ws://' + window.location.host +
'/ws/chat/' + roomName + '/');
chatSocket.onmessage = function(e) {
var data = JSON.parse(e.data);
var message = data['message'];
document.querySelector('#chat-log').value += (message + '\n');
// 아래로 자동 스크롤
document.getElementById("chat-log").scrollTop = document.getElementById("chat-log").scrollHeight;
};
chatSocket.onclose = function(e) {
console.error('Chat socket closed unexpectedly');
};
document.querySelector('#chat-message-input').focus();
document.querySelector('#chat-message-input').onkeyup = function(e) {
if (e.keyCode === 13) { // enter, return
document.querySelector('#chat-message-submit').click();
}
};
document.querySelector('#chat-message-submit').onclick = function(e) {
var username = document.querySelector('#username').value;
var messageInputDom = document.querySelector('#chat-message-input');
var message = "[" + username + "] " + messageInputDom.value;
chatSocket.send(JSON.stringify({
'message': message
}));
messageInputDom.value = '';
// 아래로 자동 스크롤
document.getElementById("chat-log").scrollTop = document.getElementById("chat-log").scrollHeight;
};
</script>
</body>
</html>
<이상>
반응형