CSS에 스크롤 막대를 추가하는 방법-CSS 튜토리얼-php.cn

CSS에 스크롤 막대를 추가하는 방법

王林

풀어 주다： 2023-01-07 11:43:03

원래의

5672명이 탐색했습니다.

CSS에서 스크롤바를 추가하는 방법은 div에 Overflow 속성을 추가하고 [overflow:scroll;]처럼 속성값을 스크롤하도록 설정하는 것입니다. Overflow 속성은 콘텐츠가 오버플로될 때 발생하는 상황을 지정합니다.

CSS에 스크롤 막대를 추가하는 방법

이 기사의 운영 환경: windows10 시스템, CSS 3, thinkpad t480 컴퓨터.

스크롤 막대를 추가하는 것은 실제로 매우 간단합니다. 콘텐츠가 요소의 상자를 넘으면 어떻게 될지 지정하는 오버플로 속성이 있습니다.

속성 값을 살펴보겠습니다.

visible 기본값. 콘텐츠는 잘리지 않고 요소 상자 외부에 렌더링됩니다.

숨겨진 내용은 잘리고 나머지 내용은 보이지 않습니다.

scroll 내용은 잘리지만 나머지 내용을 볼 수 있도록 브라우저에 스크롤 막대가 표시됩니다.

auto 내용이 잘리면 브라우저에 스크롤 막대가 표시되어 나머지 내용을 볼 수 있습니다.

inherit는 오버플로 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

예:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
div.ex1 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: scroll;
}

div.ex2 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: hidden;
}

div.ex3 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: auto;
}

div.ex4 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: visible;
}
</style>
</head>
<body>
<h1>overflow 属性</h1>

<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>

<h2>overflow: scroll:</h2>
<div class="ex1">php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！</div>

<h2>overflow: hidden:</h2>
<div class="ex2">php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！</div>

<h2>overflow: auto:</h2>
<div class="ex3">php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！</div>

<h2>overflow: visible (默认):</h2>
<div class="ex4">php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！</div>

</body>
</html>

로그인 후 복사

위 코드를 로컬로 복사하고 로컬로 실행하여 효과를 확인할 수 있습니다.

관련 동영상 튜토리얼 공유: css 동영상 튜토리얼

위 내용은 CSS에 스크롤 막대를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!