CSS에서 스크롤 막대를 숨기는 코드 예
- 黄舟원래의
- 2017-10-25 09:53:331911검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.