반응형
디브의 스크롤 바를 필요할 때만 볼 수 있도록 하려면 어떻게 해야 합니까?
난 이 디브가 있어요
<div style='overflow:scroll; width:400px;height:400px;'>here is some text</div>
텍스트가 오버플로되지 않더라도 스크롤 막대는 항상 표시됩니다.스크롤 막대는 필요할 때만 볼 수 있도록 하고, 즉 상자에 필요한 텍스트가 충분할 때만 볼 수 있도록 하고 싶습니다.텍스트 영역이 그런 것처럼.이거 어떻게 해요?아니면 디브처럼 보이도록 텍스트 영역을 스타일화할 수 있는 유일한 옵션입니까?
사용하다overflow: auto. 스크롤 막대는 필요한 경우에만 나타납니다.
(참고로 x, y 스크롤 막대에 대해서만 지정할 수도 있습니다.overflow-x: auto그리고.overflow-y: auto).
시도해 보십시오.
<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>
CSS의 오버플로 속성 변경block…로
overflow: auto;
필요한 경우에만 왼쪽에 스크롤 막대가 자동으로 추가됩니다.
해라
<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>
해라
<div id="boxscroll2" style="overflow: auto; position: relative;" tabindex="5001">
텍스트가 있든 없든 디브의 높이가 여전히 표시된다는 것을 발견했습니다.따라서 최상의 결과를 위해 이를 사용할 수 있습니다.
<div style=" overflow:auto;max-height:300px; max-width:300px;"></div>
아래 하나를 사용하여 시도해 볼 수 있습니다.
<div style="width: 100%; height: 100%; overflow-x: visible; overflow-y: scroll;">Text</div>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#scrollable-content {
background: #eee;
height: 150px;
width: 400px;
overflow-y: scroll;
}
</style>
</head>
<body>
<div id="original-content"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
<br />
<div id="scrollable-content"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
</body>
</html>
overflow : auto마법의 코드입니다.
<!DOCTYPE html>
<html>
<head>
<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: clip;
}
div.ex5 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: visible;
}
</style>
</head>
<body>
<h1>The overflow Property</h1>
<p>The overflow property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.</p>
<h2>overflow: scroll:</h2>
<div class="ex1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<h2>overflow: hidden:</h2>
<div class="ex2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<h2>overflow: auto:</h2>
<div class="ex3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<h2>overflow: clip:</h2>
<div class="ex4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<h2>overflow: visible (default):</h2>
<div class="ex5">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</body>
</html>언급URL : https://stackoverflow.com/questions/14732448/how-do-i-make-the-scrollbar-on-a-div-only-visible-when-necessary
반응형
'programing' 카테고리의 다른 글
| PHP - 어떻게 하면 'PHP - 어떻게 하면 '` 끈으로 또는 끈으로 바꾸거나` 끈으로 또는 끈으로 바꾸거나 (0) | 2023.10.17 |
|---|---|
| 컬럼을 추가하기 위해 테이블을 수정하는 동안 플라이웨이를 통해 타임아웃 오류가 발생합니다. (0) | 2023.10.17 |
| Angular로 댓글을 쓸 수 있는 방법이 있습니까?소스를 볼 때 보이지 않도록 JS (0) | 2023.10.17 |
| ESLint에서 여러 권장 구성 확장 (0) | 2023.10.17 |
| JQuery를 사용하여 :before css 선택기의 너비 속성 변경 (0) | 2023.10.17 |