HTML "overflow : auto"와 "overflow : scroll"의 차이점

123

overflow속성의 값 을 연구 할 때 다음 두 값을 발견했습니다. auto및 scroll, 콘텐츠가 요소를 오버플로 할 경우 스크롤 막대를 추가합니다.

누군가가 그들 사이의 차이점을 설명해 주시겠습니까?

html css

— GirishK
소스

185

자동은 내용이 잘릴 때만 스크롤바를 표시합니다.

그러나 스크롤은 모든 내용이 맞고 스크롤 할 수없는 경우에도 항상 스크롤바를 표시합니다.

— 요한 데이비슨
소스

2

최소한 Safari의 최신 버전에서는 차이가없는 것 같습니다.을 scroll사용해도 콘텐츠가 맞으면 스크롤바가 보이지 않습니다. 그러나 안전을 auto위해 콘텐츠가 잘릴 때만 스크롤바를 표시하고 싶기 때문에 함께갔습니다 .

— ma11hew28

1

@MattDiPasquale OS X 및 Windows는 스크롤바를 다른 방식으로 표시합니다. Mac에서 Safari를 사용하고 계십니까? OS X은 실제로 스크롤 할 때까지 스크롤바를 숨 깁니다.

— Johan Davidsson 2013 년

1

그 이상 차이가있는 것 같다, overlow: scroll: 상자 얇은하게 jsbin.com/letog/2/edit

— 드미트리 Zaitsev

스크롤 막대가 항상 표시하도록 구성하지 않는 한 사파리 (12) (아마 이전 버전도)에서 overflow: scroll와 overflow: auto기능적으로 동일 컨테이너는 내용을 포함하는 충분히 큰 경우.

— Luke Worth

15

overflow: scroll넘쳐나는 모든 콘텐츠를 숨기고 해당 요소에 스크롤 막대가 표시되도록합니다. 콘텐츠가 넘치지 않으면 스크롤바는 계속 표시되지만 비활성화됩니다.

overflow: auto 매우 비슷하지만 스크롤바는 콘텐츠가 넘칠 때만 나타납니다.

여기에 이와 유사한 설명이 있으며 요점을 설명하는 스크린 샷 이 있습니다 .

— 제임스 앨러 디스
소스

2

CSS 트릭을 살펴보십시오 .

Auto는 콘텐츠가 오버플로되는 경우에만 스크롤바를 표시합니다. 그러나 스크롤은 콘텐츠가 넘치 든 아니든 항상 스크롤바를 표시합니다.

— 사미르 차우 한
소스

1

답변에 포인트를 추가 Overflow:auto하면 컨테이너의 위치 가 절대 위치 상대 오버플로 IE7 일 때 IE7에서 작동하지 않습니다 . 하지만 설정 Overflow:scroll은 작동합니다

— 키라
소스

0

오버플로 : 스크롤은 필요하지 않은 경우에도 가로 및 세로 스크롤 막대를 모두 표시합니다. while, overflow : auto는 div에 필요한 스크롤바를 표시합니다. 따라서 기본적으로 자동은 두 scollbar를 제거하는 데 도움이됩니다. 여기에 더 있습니다.

— 매니쉬 조시
소스