textarea 가장 아래로 자동 scrolling 하기

textarea를 콘솔처럼 사용하려고 해서 봤더니

기본적으로 textarea는 자동으로 가장 아래쪽으로 스크롤링을 하지 않는다.

데이터를 textarea로 계속 append하면 스크롤 위치는 계에에에속 맨 위에 고정되어 있다.

그럼, 이걸 어떻게 처리할 수 있을까?


HTML 코드는 다음처럼 심플하게 만들었다.

<input type='text' id='txt'></input>
<button id='btn'>click</button>
<br>
<textarea id='console' row='10'>
</textarea>

자 그 다음, button을 클릭하면 input에 있는 데이터를 textarea로 append 하는 스크립트를 작성해보자.

$('#btn').on('click', () => {
  const data = $('#txt').val();
  $('#console').append(`${data}\n`);
});

결과는...?

위에서 말한것과 같이 textarea의 스크롤이 꿈쩍도 안한다. 후후후...


이제 다음과 같이 스크립트를 수정해서 textarea의 scrollHeight 값을 scrollTop으로 지정하도록 변경해보자.

$('#btn').on('click', () => {
  const data = $('#txt').val();
  $('#console').append(`${data}\n`);
  const top = $('#console').prop('scrollHeight');
  $('#console').scrollTop(top);
});

이제, textarea의 스크롤 위치가 자동으로 맨 아래쪽을 보여주도록 되었다. :)