텍스트 영역에서 스크롤바 제거


82

에서 스크롤바를 항상 보는 방법에 대한 이전 질문 ( <textarea>에 스크롤바 추가 )에 이어 텍스트가 오버플로 되더라도 <textarea>에서 스크롤바가 없도록 설정하는 방법이 궁금합니다 <textarea>. 이를 통해 아래로 스크롤하려면 화살표 키 또는 마우스를 사용하여 텍스트를 탐색합니다.

어떻게 할 수 있습니까?


4
해봤 어 <textarea style="overflow:hidden"></textarea>?
andyb

답변:


136

다음을 시도해보십시오. 모든 브라우저 또는 사용중인 브라우저에서 어떤 것이 작동하는지 확실하지 않지만 모두 시도하는 것이 가장 좋습니다.

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

또는

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

... 위에서 제안한대로

당신은 또한 이것을 추가해 볼 수 있습니다, 나는 그것을 전에 사용하지 않았고, 오늘 사이트에 게시 된 것을 봤습니다 :

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

이 마지막 옵션은 textarea. 여기 에서 CSS resize속성 에 대한 자세한 정보를 찾을 수 있습니다.


5
textarea_element.style.overflow = "숨김"; (파이어 폭스 44.0에서 일)
AAAfarmclub

이 방법은 스크롤바를 숨기지 만 콘텐츠가 크면 더 이상 스크롤하지 않습니다.
Vano


15

style="overflow: hidden"style="resize: none"트릭을했던 사람이었다.


13
이게 정확히 답이 아니에요?
Robbo


7

예 : scrolltextarea 태그에 클래스를 제공하십시오 . 그리고 CSS 에서이 속성을 추가하십시오-

.scroll::-webkit-scrollbar {
   display: none;
 }
<textarea class='scroll'></textarea>

스크롤 부분을 놓치지 않고 작동했습니다.


6

스크롤 막대를 숨기지 만 여전히 CSS를 사용하여 스크롤 할 수 있음

스크롤바를 숨기려면 주요 브라우저 (Google Chrome, Safari 또는 최신 버전의 Opera)에서 지원하므로 -webkit-을 사용하십시오. 아래에 나열된 다른 브라우저에 대한 다른 많은 옵션이 있습니다.

    -webkit- (Chrome, Safari, newer versions of Opera):
    .element::-webkit-scrollbar { width: 0 !important }
    -moz- (Firefox):
    .element { overflow: -moz-scrollbars-none; }
    -ms- (Internet Explorer +10):
    .element { -ms-overflow-style: none; }

참조 : https://www.geeksforgeeks.org/hide-scroll-bar-but-while-still-being-able-to-scroll-using-css/


0

클래스의 최대 높이 속성을 제거하여 텍스트 본문의 스크롤 막대를 제거 할 수있었습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.