텍스트 입력 상자(textarea)에서 스크롤바 없애기

텍스트 입력 상자(textarea)에서 스크롤바를 없애는 방법

텍스트 입력 상자(textarea)에서 스크롤바 없애려면 다음과 같이 overflow: hidden이나 resize:none을 추가하면 됩니다.

<textarea style="overflow:hidden"></textarea>

- 또는 - 

<textarea style="resize:none"></textarea>

보통은 다음과 같이 설정하는 것이 최선 같습니다.

<textarea style="overflow:auto"></textarea>

CSS를 사용하여 숨기는 방법도 있습니다.

HTML:

<textarea class='scroll'></textarea>

CSS:

.scroll::-webkit-scrollbar {
   display: none;
 }

이 방식으로 하면 파이어폭스(Firefox)에서는 작동하지 않을 수 있습니다만, 파이어폭스 점유율이 워낙 낮아서 무시해도 될 것 같습니다.

jQuery 방식도 가능합니다. 다음과 같은 코드를 사용하면 스크롤바가 제거되고 높이가 자동으로 조정된다고 합니다.

$('textarea').each(function () {
  this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
  }).on('input', function () {
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight) + 'px';
});

출처: Remove scrollbars from textarea (Textarea에서 스크롤바를 제거하는 방법)

※쿠팡 파트너스 활동으로 일정액의 수수료를 제공받을 수 있습니다.

참고

https://avada.tistory.com/1777

CSS로 텍스트의 절반 높이만 형광펜으로 표시하는 방법

https://avada.tistory.com/1752

CSS로 텍스트 라인 수 제한하는 방법