html 스크롤바 텍스트 영역 속성 설정_HTML/Xhtml_웹페이지 제작

1． Overflow 내용이 넘칠 때 설정(설정된 객체에 스크롤바 표시 여부 설정)
overflow-x 가로 내용이 넘칠 때 설정
overflow-y 세로 내용이 넘칠 때 설정
값 ​​위의 세 가지 속성에 대해 설정된 것은 표시(기본값), 스크롤, 숨김, 자동입니다.
2． scrollbar-3d-light-color 3차원 스크롤 막대의 밝은 가장자리 색상(스크롤 막대의 색상 설정)
scrollbar-arrow-color 위쪽 및 위쪽의 삼각형 화살표 색상 아래쪽 버튼
scrollbar-base-color 스크롤바 기본 색상
scrollbar-dark-shadow-color 3차원 스크롤바의 강한 그림자 색상
scrollbar-face-color 색상 3차원 스크롤바의 돌출된 부분
scrollbar-highlight-color 스크롤바의 빈 부분의 색상
scrollbar-shadow-color 3차원 스크롤바 그림자의 색상
우리는 여러 예를 통해 위의 스타일 속성을 설명합니다:
1. 브라우저 창에 스크롤 막대가 나타나지 않도록 합니다.
가로 스크롤 막대 없음

코드 복사

코드는 다음과 같습니다.

🎜>
세로 스크롤바 없음

코드 복사 코드는 다음과 같습니다.

스크롤바 없음

코드 복사코드는 다음과 같습니다.

Overflow:hidden">

2. 여러 줄 텍스트 상자의 스크롤 막대 설정
가로 스크롤 막대 없음

코드 복사코드는 다음과 같습니다.

< ; /textarea> <div class="msgborder" id="phpcode133"> <br><br>세로 스크롤 막대 없음</div> <br><br><br><div class="msgheader"> <div class="right">코드 복사<span style="CURSOR: pointer" onclick="copycode(getid('phpcode134'));"><u></u> 다음: </span> </div> </div> <div class="msgborder" id="phpcode134"> <br><br>스크롤 막대 없음</div> <br><br><br><div class="msgheader"> <div class="right">코드 복사<span style="CURSOR: pointer" onclick="copycode(getid('phpcode135'));"><u></u>코드는 다음과 같습니다.</span> </div> </div> <textarea style="overflow-x:hidden;overflow- y: Hidden"> <div class="msgborder" id="phpcode135">또는 <br><br><br> </div>3. 창 ​​스크롤 막대를 설정합니다. 색상 <br> <strong>창 스크롤바 색상을 빨간색으로 설정 </strong>scrollbar-base-color는 기본 색상만 설정합니다. 스크롤 막대의 색상을 변경하려면 이 속성을 설정하세요. <br>약간의 특수 효과 추가: <br><br><br><br><div class="msgheader"> <div class="right">코드 복사<span style="CURSOR: pointer" onclick="copycode(getid('phpcode136'));"><u></u>코드는 다음과 같습니다.</span> </div> </div> <div class="msgborder" id="phpcode136"> <br><br> </div>4. 스타일 시트를 <br> <strong></strong><br><br><div class="msgheader"> <div class="right">코드 복사 <span style="CURSOR: pointer" onclick="copycode(getid('phpcode137'));"><u></u>코드는 다음과 같습니다.</span> </div> </div> <style> <div class="msgborder" id="phpcode137">.coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;} <br /></style> <br><br><br>다음과 같이 호출하세요. 🎜><br><br><br><div class="msgheader">코드 복사<div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode138'));"><u>코드는 다음과 같습니다.</u></span> </div> <textarea class="coolscrollbar ">