CSS에서 스크롤 막대를 숨기는 코드 예-CSS 튜토리얼-php.cn

CSS에서 스크롤 막대를 숨기는 코드 예

黄舟

풀어 주다： 2017-10-25 09:53:33

원래의

2023명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!