이 문서에서는 가로/세로 스크롤 막대를 추가하거나 제거할 수 있는 모든 값과 함께 오버플로 속성을 자세히 살펴보겠습니다. 즉, 스크롤바를 만드는 방법입니다.

CSS의 오버플로는 콘텐츠가 이 블록의 높이나 너비를 초과하는 경우 블록의 정보 표시 방법을 담당합니다. 이 속성은 블록 요소(display : block 또는 초기에 블록 요소인 요소(div 등))에만 적용됩니다.

이 속성이 취할 수 있는 가능한 값(기본적으로 표시됨):

• 표시 - 지정된 높이와 너비를 넘어서도 요소의 전체 내용이 표시됩니다.
• 숨김 - 요소 내부 영역만 표시되고 나머지는 숨겨집니다.
• 스크롤 - 스크롤 막대가 항상 추가됩니다.
• 자동 - 필요한 경우에만 스크롤 막대가 추가됩니다.
• 상속 - 상위 값을 상속합니다.

대부분 이 속성은 요소에 스크롤 막대를 제거하거나 추가하는 데 사용됩니다. 예를 들어 프레임을 전체 크기로 밀어 넣지 않도록 프레임을 처리하는 방법은 다음과 같습니다. 또는 페이지의 절반을 차지하지 않고 특수 블록에 편안하게 배치되어 스크롤하고 읽을 수 있도록 큰 텍스트를 삽입합니다. 대부분의 경우 이 속성은 정보를 편안하게 표시하는 문제를 해결합니다.

데모에서는 각 속성 값이 실제로 어떻게 작동하는지 확인할 수 있습니다.

HTML 코드

body (여백:0 0 0 0; 패딩:0 0 60px 0; 글꼴 크기:16px;) h2 (색상:#CC0033;) div ( 너비:200px; /* 고정 너비 */ 높이:300px; /* 고정 height */ border:1px solid #555; padding:4px; float:left) .VisibleDiv (overflow:visible;) .HiddenDiv (overflow:hidden;).ScrollDiv (overflow:scroll;) .AutoDiv (오버플로:auto;)

이 특별한 경우 블록의 높이와 너비가 고정되어 있다는 사실에 주목할 가치가 있습니다. 이는 중요합니다. 예를 들어 블록 높이가 auto로 설정된 경우 옵션을 고려하십시오.

비활성 스크롤 막대가 나타나는 scroll 의 경우 약간의 불편함을 제외하면 모든 경우에 블록 내부에 텍스트가 올바르게 표시되는 것을 볼 수 있습니다.

그러나이 경우 많은 사람들이 왜 발생했는지, 어떻게 해결하는지 이해하지 못하는 작은 위험이 있습니다. 사실은 블록이 Overflow: visible; 즉, 기본값과 해당 내용에 none 이외의 부동 소수점 값이 있는 요소가 있으면 이 모든 것이 잘못 표시됩니다. 이 상황이 무엇인지 이해하려면 다음 예를 고려하십시오.

VisibleDiv 블록 아래에는 또 다른 블록이 있습니다.

VisibleDiv 블록 아래에는 아무것도 없습니다

body(여백:0 0 0 0; 패딩:0 0 60px 0; 글꼴 크기:16px;) h2(색상:#CC0033;) p(float:left;) div(너비:500px; 높이:자동; 테두리: 1px 솔리드 #555; 여백: 4px; 글꼴 두께: 굵게;)

첫 번째 경우에는 float 속성이 있는 콘텐츠가 블록 외부로 이동하고 블록 높이를 결정할 때 고려되지 않는다는 것이 분명합니다. 두 번째 경우에는 Overflow: visible이 있는 블록 아래에 있습니다. 또 다른 블록은 특별히 배치되고 다른 색상으로 칠해져 있습니다. 이러한 블록이 페이지에서 어떻게 작동할 수 있는지에 대한 유일한 예는 아닙니다(overflow : visible ; 및 height : auto ; 사용). 이는 visible 값을 Hidden으로 대체하여 수정할 수 있습니다. 이 속성은 height: auto가 있는 블록에만 지정해야 한다는 점을 기억하세요. , 고정된 높이가 있는 경우 콘텐츠가 지정된 높이보다 크면 단순히 숨겨질 가능성이 높습니다.

수정된 버전은 다음과 같습니다.

또한 블록에 Overflow: visible 가 있는 경우에도 이러한 문제가 발생하지 않습니다. 높이: 자동; float 속성의 일부 값도 지정됩니다. 일반적으로 요소 표시는 개별 속성이 아닌 속성 집합에 따라 달라지는 경우가 많습니다.

오버플로 속성은 전체 내용이 맞지 않고 지정된 치수 영역을 벗어나는 경우 블록 요소의 내용 표시를 제어합니다.

간략한 정보

명칭

가치

visible 지정된 높이와 너비를 넘어서도 요소의 전체 내용을 표시합니다. 숨김 요소 내부 영역만 표시되고 나머지는 숨겨집니다. 스크롤 스크롤 막대는 항상 추가됩니다. 자동 스크롤 막대는 필요한 경우에만 추가됩니다.

모래 상자

곰돌이 푸는 항상 약간의 다과를 싫어하지 않았습니다. 특히 아침 11시에 아침 식사가 오랫동안 끝났고 점심 식사가 아직 시작되지 않았기 때문입니다. 그리고 물론 그는 토끼가 컵과 접시를 꺼내는 것을 보고 몹시 기뻤습니다.

div( 높이: 80px; 오버플로: 자동 ; )

예

이 예의 결과는 그림 1에 나와 있습니다. 1.

쌀. 1. 오버플로 속성 적용

객체 모델

객체.style.overflow

메모

Internet Explorer 버전 7.0 이하:

• 오버플로 값이 auto 또는 스크롤로 설정된 상대적으로 위치가 지정된 하위 요소는 position:fixed 가 있는 것처럼 동작합니다.

인터넷 익스플로러 8:

• 스크롤 값과 max-height 및 float 속성을 오버플로와 결합하면 웹 페이지 요소가 누락되고 브라우저에 빈 화면이 표시될 수 있습니다.
• float 및 Overflow 속성이 scroll 로 설정된 블록의 경우 max-width 속성을 통해 지정된 너비는 무시됩니다.
• 수평 스크롤 막대가 있는 블록의 높이는 스크롤 막대의 높이만큼 증가합니다. 하지만 CSS 사양에 따르면 지정된 크기에는 스크롤 막대도 포함되어야 합니다.

Firefox 3.6은 표 셀 그룹에 오버플로를 올바르게 적용하지 않습니다( , , ).

사양

각 사양은 여러 단계의 승인을 거칩니다.

• 권장 사항 - 이 사양은 W3C에서 승인되었으며 표준으로 권장됩니다.
• 후보자 추천 ( 가능한 추천) - 표준을 담당하는 그룹은 목표 달성에 만족하지만 표준을 구현하려면 개발 커뮤니티의 도움이 필요합니다.
• 제안된 권장사항 제안된 권장 사항) - 이 단계에서 문서는 최종 승인을 위해 W3C 자문위원회에 제출됩니다.
• 작업 초안 - 커뮤니티 검토를 위해 논의되고 수정된 초안의 보다 성숙한 버전입니다.
• 편집자 초안( 편집 초안) - 프로젝트 편집자가 변경한 후의 표준 초안 버전입니다.
• 초안 ( 초안 사양) - 표준의 첫 번째 초안 버전입니다.

CSS 오버플로 규칙(숨김, 표시, 스크롤 및 자동 값 사용)이 의도한 영역에 맞지 않는 경우 콘텐츠를 어떻게 제어할 수 있는지 살펴보겠습니다.

실제로(레이아웃이나 편집 중에) 이런 상황이 자주 발생하므로 많은 사람들에게 유용할 것입니다. 더욱이, 그 과정에서 우리는 특별한 경우이고 고유한 특징을 가지고 있는 이 속성인 Overflow-x와 Overflow-y의 변형을 다룰 것입니다. 요소 경계를 넘어 확장되는 블록 내 텍스트의 가시성 모드를 결정하는 관련 텍스트 오버플로 규칙도 살펴보겠습니다.

물론, 너비와 높이(블록의 너비와 높이)를 사용하여 영역의 특정 치수를 지정하지 않고는 불가능한 경우가 많습니다. 일반적으로 가능한 모든 변형에서 오버플로 속성의 동작에 대한 아래 예를 살펴보겠습니다.

오버플로(표시, 숨김) - 경계를 넘어 확장되는 블록의 표시되거나 숨겨진 콘텐츠

먼저, 전통에 따라 W3C 사양표에서 어떤 값이 유효한지 살펴보겠습니다. (데이터는 최신 CSS3에서 유효하고 지원되지만 CSS2.1을 기반으로 합니다.)

보시다시피 오버플로에는 4개의 주요 매개변수(visible, hide, auto, scroll)와 원하는 경우 할당할 수 있는 상속 값이 있지만 기본적으로 이 규칙은 상속되지 않습니다( 상속 : 아니요스크린샷에서). 기본값은 표시(초기: 표시)입니다.

사례 연구를 통해 연구에 뛰어들기 전에 몇 가지 세부 사항을 명확하게 살펴보겠습니다. 위에서 언급했듯이 오버플로 규칙을 사용하면 블록 요소가 경계 내에 맞지 않는 경우 블록 요소의 내용을 제어할 수 있습니다. 이는 이 CSS 규칙의 이름에서 직접 따온 것입니다(영어로 오버플로는 오버플로, 초과를 의미합니다.)

제공된 링크를 따라가면 구성 내용을 미리 익힐 수 있습니다. 또한 페이지 블록 특성의 요소를 제공하는 자료를 살펴보는 것도 유용할 것입니다.

DIV 컨테이너를 예로 들어(블록 레이아웃의 기초인 div에 대한 추가 정보) 스타일 속성을 통해 배경을 사용하여 색상을 지정하고 내부에 임의의 텍스트를 배치해 보겠습니다.

최종 결과는 다음과 같습니다.

컨테이너의 너비를 정의하지 않았습니다. 이 경우 블록 요소는 너비에서 사용 가능한 모든 공간을 차지합니다. 그러나 블록의 높이는 지정되지 않은 경우 내용(이 예에서는 거기에 있는 텍스트)에 따라 정확하게 결정됩니다.

높이에 따라 배포할 수 없는 콘텐츠가 포함된 블록에 대한 오버플로 규칙

위에서는 너비가 제한될 때 재배포할 수 있는 텍스트가 포함된 블록 요소의 예를 제시했습니다(단어 줄바꿈 변경). 이는 이제 휴대폰에서 보기 위해 적응형 디자인을 사용할 때 특히 그렇습니다. 그러나 어떤 이유로든 콘텐츠에 유연성이 없는 경우가 있습니다.

위에서 논의한 예와 동일한 조건부터 시작하겠습니다. 기억하는 것처럼 고정 블록 너비를 지정할 때 콘텐츠는 가로 테두리를 초과하지 않는 방식으로 재배포되었지만 동시에 (콘텐츠와 함께) 컨테이너의 높이가 세로로 증가했습니다. 이제 내용을 변경하고 표준 텍스트를 너비를 나타내는 공백이 없는 긴 단어로 바꾸겠습니다.

이제 너비가 제한되면 콘텐츠가 가로 경계를 즉시 초과합니다. 그리고 오버플로 숨김을 작성하면 내용이 잘립니다.

오버플로 규칙의 스크롤 및 자동 매개변수를 사용하여 스크롤 추가

이제 컨테이너의 너비와 높이가 고정되어 있지만, 컨테이너에 맞지 않는 내용은 접근 가능하도록 놔두는 것이 바람직한 경우를 살펴보겠습니다. 너비와 높이가 고정된 동일한 예를 들어보겠습니다. 하지만 명확성을 위해 다음을 추가하여 높이 값을 60px로 설정하겠습니다. 오버플로:스크롤 CSS 스타일:

결과적으로 스크롤바가 수직 및 수평으로 나타납니다.

따라서 스크롤을 통해서라도 콘텐츠에 액세스할 수 있습니다. 다만, 전체 보기에 필요한 세로 스크롤링뿐만 아니라 활성화되지 않는 가로 스크롤링도 형성되어 있으니 참고하시기 바랍니다. 이것은 스크롤 값의 특징입니다.

기본 스타일 규칙에는 기본 오버플로와 동일한 값(표시, 숨김, 스크롤, 자동)을 취하는 Overflow-x 및 Overflow-y 형식의 변형이 있으며 지정된 매개변수만 가로(x) 및 세로(y)로 블록의 내용에 적용됩니다.

CSS 텍스트 오버플로(클립, 줄임표) 규칙

이제 위에서 설명한 CSS3에서만 나타나는 오버플로 속성의 수정에 대해 알아 보겠습니다. 이에 대한 정보는 해당 공식 페이지(W3C 편집 초안)에서 확인할 수 있습니다.

재산 텍스트 오버플로 2가지 주요 의미(클립 및 줄임표)가 있습니다. visible 이외의 값으로 오버플로가 지정된 경우에만 적용됩니다. 기억하시는 것처럼 이는 기본 매개변수이므로 해당 요소의 스타일에는 숨김, 스크롤 또는 자동 오버플로가 있어야 합니다.

클립은 기본값이며 단순히 텍스트를 다듬습니다. 따라서 적절한 CSS 속성과 함께 DIV에 대한 text-overflow를 사용하고 white-space:nowrap(단어 줄 바꿈을 비활성화하기 위해)을 추가해 보겠습니다.

보시다시피, 줄임표를 사용하면 줄임표를 추가할 수 있습니다.잘린 텍스트 대신 계속됨을 암시합니다. 이 예에 논리적인 결론을 내리기 위해 div에 pseudo-class:hover를 추가하면 요소 위에 마우스를 올리면 요소의 스타일이 변경됩니다.

클래스1:호버(오버플로:표시; 공백:일반;)

이제 텍스트가 잘리지만 그 위로 마우스를 가져가면 전체 내용이 나타납니다. 제공된 링크를 따라가면 이를 확인할 수 있습니다.

저자로부터:우리 손님 Peter Businessmans의 기사. Peter는 Audience의 프런트엔드 개발자로 SCSS의 글쓰기 스타일을 즐깁니다. 오늘 그는 내가 정직한 CSS 트릭이라고 부르는 것을 보여줄 것입니다. 전체 웹은 수직입니다. 일반 책처럼 사이트를 왼쪽에서 오른쪽으로, 위에서 아래로 읽습니다. 하지만 때로는 수직성에서 벗어나 뭔가 이상한 일을 하고 싶을 때도 있습니다. 즉 수평적 목록을 만드는 것입니다. 아니면 더 미친 수평 사이트!

다음과 같이 할 수 있다면 좋을 것 같습니다.

/* 가짜 코드 */ div ( 스크롤 방향: 가로; )

불행하게도 이런 일은 일어나지 않을 것입니다. 이것은 CSS에서도 계획되지 않았습니다.

내가 일하는 회사가 이것을 실제로 사용할 것이기 때문에 이것은 너무 안타깝습니다. 우리는 프레젠테이션을 많이 하는데, 프레젠테이션은 상당히 수평적인 일입니다. 일반적으로 슬라이드의 가로 세로 비율은 4:3 또는 16:9입니다. 이로 인해 수평 슬라이드와 수직 웹 기술에 지속적인 문제가 있습니다. "우리"는 나를 의미합니다. 하지만 제가 좋아하는 것은 도전입니다.

또 다른 사용 사례

구체적인 적용 방법이 떠올랐습니다. 고객이 하나의 슬라이드에서 모든 제품을 볼 수 있으면 편리할 것이라는 생각입니다. 당연히 제품 카탈로그는 한 가지 형태로 정리되지 않습니다. 따라서 우리는 카탈로그를 각각 가로 스크롤 기능이 있는 세 가지 범주로 나누기로 결정했습니다. 이렇게 하면 가장 인기 있는 세 가지 제품이 각 카테고리에 표시되고 덜 중요한 제품은 쉽게 액세스할 수 있습니다.

JavaScript가 없는 메소드

우리 모두는 JS에서 가로 스크롤을 수행하는 방법이 다양하다는 것을 알고 있습니다. CSS-Tricks에 대한 몇 가지 예가 있습니다. 이 아이디어가 순수한 CSS를 사용하여 구현될 수 있는지 궁금합니다. 해결책은 매우 간단했습니다.

요소가 포함된 컨테이너를 만듭니다.

아래쪽 가장자리가 오른쪽에 오도록 컨테이너를 시계 반대 방향으로 90도 회전합니다.

컨테이너 내부의 요소를 다시 원래 위치로 회전시킵니다.

1단계) 컨테이너 생성

많은 자녀가 있는 div를 만듭니다.

이 예에서는 스크롤 가능한 컨테이너의 너비가 300px이고 8개의 100x100px 요소가 있습니다. 크기는 임의적이며 임의로 설정할 수 있습니다.

컨테이너의 높이는 너비가 되고 그 반대도 마찬가지입니다. 아래에서 컨테이너의 "너비"는 300px입니다.

가로 스크롤 래퍼(너비: 100px; 높이: 300px; 오버플로-y: 자동; 오버플로-x: 숨김; )

그리고 하위 요소:

가로 스크롤 래퍼 > div(너비: 100px; 높이: 100px; )

2단계) 용기를 회전시키세요

이제 CSS 변환 속성을 사용하여 컨테이너를 -90도 회전해야 합니다. 수평 스크롤러가 있습니다.

수평 스크롤 래퍼( ... 변환: 회전(-90deg); 변환 원점: 오른쪽 상단; )

작은 문제가 하나 있습니다. 하위 요소가 컨테이너와 함께 회전했습니다.

3단계) ​​하위 요소를 원래 위치로 되돌립니다.

그렇다면 요소를 원래 위치로 되돌리는 방법은 무엇입니까? CSS 변환 속성을 사용하여 다시 되돌립니다.

가로 스크롤 래퍼 > div ( ... 변환: 회전(90deg); 변환 원점: 오른쪽 상단; )

4단계) 고정 위치 지정

모든 것이 좋아 보이지만 몇 가지 문제가 있습니다.

컨테이너를 회전하고 오른쪽 상단을 앵커로 설정하여 왼쪽이 컨테이너 너비로 이동했습니다. 상상하기 어렵다면 페이지 오른쪽 상단에 손가락을 대고 회전해 보세요. 종료: 번역 속성을 사용하여 다시 되돌려야 합니다.

이미 더 좋습니다. 그러나 하위 요소에서도 동일한 문제가 관찰되므로 첫 번째 요소는 여전히 표시되지 않습니다. 이 문제는 첫 번째 하위 요소에 너비 값으로 상단 여백을 제공하거나 모든 요소를 ​​컨테이너처럼 변환하여 해결할 수 있습니다. 내가 찾은 가장 쉬운 방법은 하위 요소의 너비와 동일한 컨테이너에 상단 패딩을 추가하여 요소에 대한 버퍼 영역을 만드는 것입니다.

호환성

사용 가능한 장치의 호환성을 확인했습니다.

데스크탑

스크롤바 스타일은 현재 Webkit/Blink 브라우저에서만 작동하므로 Firefox 및 IE에서는 일반 회색 스크롤바가 표시됩니다. 이는 JS를 사용하여 수정하고 완전히 숨길 수 있지만 이는 다른 강의의 주제입니다.

마우스 휠을 사용한 스크롤은 데스크탑에서 잘 작동합니다. 하지만 내 노트북에는 이 문제에 대한 자체 의견이 있습니다. 터치 스크린과 터치 패드가 있는 장치에서 데모는 마치 div가 전혀 회전되지 않은 것처럼 작동합니다.

모바일 장치

Android가 컨테이너가 회전된 것을 인식하고 왼쪽과 오른쪽으로 스와이프하여 스크롤할 수 있다는 사실에 놀랐습니다.

반대로 iOS에서는 모든 것이 그렇게 순조롭지 않습니다. 브라우저는 컨테이너가 전혀 회전되지 않은 것처럼 동작합니다. 따라서 스크롤하려면 위아래로 스와이프해야 하는데, 이는 상당히 이상합니다. 오버플로: 숨겨도 문제가 해결되지 않습니다.

결론

Can I Use 웹사이트에 따르면 CSS 변환은 이제 93% 이상의 사용자가 지원합니다(작성 ​​당시, 2016년 11월). 여기에는 문제가 있어서는 안 됩니다.

프로덕션에서는 이 방법을 사용하지 않는 것이 좋습니다. 일부 장치에서 테스트했지만 전부는 아니었고 철저하지는 않았습니다.

가장 큰 문제는 좌우로 이동하려면 위아래로 스와이프해야 하는 터치 입력입니다. 해결책은 설명과 함께 사이트에 메시지를 작성하는 것일 수 있지만, 그렇게 하면 사용자가 이를 읽도록 의존해야 합니다. 그럼에도 불구하고 그것은 상식에 어긋날 것입니다. 또 다른 해결책은 기기에서 JS를 사용하여 터치 입력을 캡처하는 것입니다. 하지만 모든 것을 JS로 작성하고 CSS 해킹을 완전히 포기하는 것이 더 좋습니다.