div의 스크롤 막대를 필요한 경우에만 표시하려면 어떻게합니까?

151

이 div가 있습니다.

<div style='overflow:scroll; width:400px;height:400px;'>here is some text</div>

텍스트가 넘치지 않더라도 스크롤 막대는 항상 표시됩니다. 스크롤 막대를 필요할 때만 볼 수있게 만들고 싶습니다. 즉, 상자에 필요한 텍스트가 충분한 경우에만 볼 수 있습니다. 텍스트 영역처럼. 어떻게해야합니까? 아니면 div처럼 보이도록 텍스트 영역의 스타일을 지정하는 유일한 옵션입니까?

css html scrollbar

— Benubird
소스

이건 어때? 마우스를 가져 가면 스크롤 막대 만 표시됩니다. 이것이 당신에게 유용한 지 확실하지 않습니다. stackoverflow.com/questions/7125185/…

— Ryan Beaulieu

codepen.io/anon/pen/QwLeMG 희망이 당신을 도울 수

— vishalkin

overflow: auto;안드로이드에서 작동하지 않습니다 :-(

— aioobe

313

사용하십시오 overflow: auto. 스크롤바는 필요할 때만 나타납니다.

참고로, x 또는 y 스크롤 막대에 대해서만 지정할 수도 있습니다 ( overflow-x: auto및 overflow-y: auto).

— 히데
소스

5

overflow-y는 다음을 지정하는 경우에만 작동합니다.max-height

— Black

1

overflow-y는 최대 높이가 필요하지 않습니다. 나는 overflow-y와 함께 max-height를 사용하지 않았으며 매번 작동했습니다.

— Sumafu

1

@Sumafu 지금 당장 경험할 수 있듯이 사례에 따라 필요할 수 있습니다.

— David

1

페이지 또는 뷰포트 경계를 기준으로 요소의 크기를 조정할 수 없으므로 오버플로 요소를 사용 하거나 배치하는 경우 필요 height하거나 max-height설정 해야 합니다. absolutefixed

— Scott Schupbach

15

이 시도:

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>

— 클라 이노 하드
소스

7

시험

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>

— pbaris
소스

6

시험

<div id="boxscroll2" style="overflow: auto; position: relative;" tabindex="5001">

— GrvTyagi
소스

0

텍스트가 있거나 없을 때 여전히 div 높이가 표시되는 것을 발견했습니다. 최상의 결과를 위해 이것을 사용할 수 있습니다.

<div style=" overflow:auto;max-height:300px; max-width:300px;"></div>

— 샤일 렌드 라 쿠마르
소스

0

아래에서 시도해 볼 수 있습니다.

  <div style="width: 100%; height: 100%; overflow-x: visible; overflow-y: scroll;">Text</div>

— 파푼 사후
소스