overflow 속성은 콘텐츠가 요소 상자를 오버플로할 때 발생하는 상황을 지정합니다.
①visible 기본값입니다. 콘텐츠는 잘리지 않고 요소 상자 외부에 렌더링됩니다.
②숨겨진 내용은 잘리고 나머지 내용은 보이지 않게 됩니다.
3scroll 내용이 잘리지만 나머지 내용을 볼 수 있도록 브라우저에 스크롤 막대가 표시됩니다.
4auto 내용이 잘려지면 브라우저에 스크롤 막대가 표시되어 남은 내용을 볼 수 있습니다.
⑤inherit는 오버플로 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.
예시 1: 테이블을 컨테이너로 사용하고 스크롤 막대를 [숨기기]
참고: {①테이블 표시가 차단으로 설정되어 있지 않으면 스크롤 막대가 표시되지 않습니다.}
먼저 테이블을 넣어야 합니다. 수정하려면
세로 방향으로만 스크롤하려는 경우 외부 p 속성을 설정할 수 있습니다. Overflow-x:hidden;
예:
<html lang="en"> <head> <meta charset="UTF-8"> <title>滚动条</title> <style type="text/css"> *{margin: 0;padding: 0} .area{width: 300px;height: 600px;background-color: #BFEFFF; overflow-x: hidden;position: relative} .area table{display: block;width: 320px;height: 600px; background-color: #00D685;overflow-y: auto;} .area table tr td{height: 200px;width: 300px} </style> </head> <body> <p class="area"> <table> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> <tr><td>4</td></tr> <tr><td>5</td></tr> <tr><td>6</td></tr> </table> </p> </body> </html>
테이블 속성을 수정하려면 여기를 참고하세요.
예 2:
ul을 컨테이너로 사용하고 스크롤 막대를 숨깁니다
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滚动条</title> <style type="text/css"> *{margin: 0;padding: 0} .area{width: 300px;height: 600px;background-color: #BFEFFF; overflow-x: hidden; position: relative} .area ul{height: 100%;width: 320px;background-color: #00D685;list-style: none; overflow-x: hidden;overflow-y: auto} .area ul li{height: 200px;width: 100%;background-color: #cccccc} </style> </head> <body> <p class="area"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </p> </body> </html>
원리: 다른 오버플로 레이어를 중첩합니다. 컨테이너 외부에 숨긴 다음 내부 콘텐츠의 크기를 외부 중첩 레이어와 동일한 크기로 제한합니다. , 그래서 변장하여 숨겨져 있습니다.
위 내용은 CSS에서 스크롤 막대를 숨기는 코드 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!