때때로 페이지의 요소가 뷰포트 너머에 위치할 수 있으며, 이로 인해 의도하지 않은 수평 또는 측면 스크롤이 발생하여 레이아웃 주변에 추가 빈 공간이 표시될 수 있습니다. 가로 스크롤이 모두 바람직하지 않은 것은 아니지만, 디자인과 충돌할 경우 초과를 사용하여 방지하는 방법(숨김, 적응형 디자인, 의도적인 상호 작용 설정)을 안내해 드립니다.
이 튜토리얼에서는 다음 내용을 이해하게 됩니다.
- 초과 발생 이유
- 초과분을 식별하는 방법
- 과잉 문제 해결 전략
초과 발생 이유
다양한 요인으로 인해 디자인에서 원치 않는 가로 스크롤이 발생할 수 있지만 일반적으로 다음 두 가지 이유 중 하나로 인해 발생합니다.
- 디자인 레이아웃에는 화면 밖으로 뷰포트 밖으로 이동하는 방식으로 크기가 지정되거나 배치되는 요소가 포함됩니다.
- 화면 밖에서 시작되는 활동이나 애니메이션. 예를 들어 측면에서 들어오는 제목이 있는 경우 애니메이션이 완료된 후 제목이 궁극적으로 올바른 위치에 도달하더라도 페이지가 로드될 때 화면 밖의 초기 위치로 인해 오버플로가 발생할 수 있습니다.
과도한 가로 스크롤은 위에서 언급한 두 가지 시나리오와 다른 시나리오에서 발생할 수 있지만 일반적으로 레이아웃 및 애니메이션 관련 오버플로가 가장 많이 나타납니다.
초과분을 식별하는 방법
가로 스크롤은 지속적으로 부정적이지 않습니다. 그럼에도 불구하고 과도한 가로 스크롤을 확인할 때 레이아웃 경계(일반적으로 디자인의 오른쪽)가 의도한 대로 작동하지 않는다는 인상을 주는 모든 항목을 주의하세요. 간단히 말해서 스크롤하는 동안 레이아웃 경계의 가장자리를 넘어 확장되는 추가 공간이나 요소를 찾으십시오. 이것을 평가할 수 있습니다. 디자이너 그리고 게시된 사이트.
에서 디자이너, 잠재적으로 원하지 않는 수평 스크롤을 식별하려면 다음을 수행하십시오.
- 액세스 디자이너
- 스크롤 왼쪽 그리고 오른쪽 뷰포트 외부에서 넘치는 요소를 관찰하려면
- 크기 조정 디자이너 캔버스
- 반응성과 유동성을 평가하기 위해 캔버스 크기 조정
메모: 트랙패드나 모바일 장치를 사용하는 경우 왼쪽 및 오른쪽으로 스크롤합니다. 단, 마우스 휠을 사용하여 옮기다 일반적으로 왼쪽 및 오른쪽 스크롤이 가능합니다.
반응형 디자인 제작에 대해 자세히 알아보세요.
귀하의 원치 않는 초과분을 식별하려면 게시된 사이트 (특히 상호작용이 활성화된 경우):
- 게시 귀하의 사이트
- 당신의 경우 확인 상호작용 레이아웃 오른쪽에 여유 공간이 생깁니다(특히 모바일 장치의 경우).
과도한 공백은 일반적으로 상호 작용이 완료된 후에도 애니메이션 시작 시 활용된 추가 너비가 상호 작용에 필요하다고 브라우저가 계속 생각하기 때문에 상호 작용에서 발생합니다.
과잉 문제 해결 전략
다양한 방법을 통해 가로 스크롤을 방지할 수 있습니다.
- 과잉 활용: 숨김
- 레이아웃과 반응성을 평가하세요.
- 상호 작용 설정에 유의하세요.
- 대체 솔루션 살펴보기
- 초과 적용: 전체 페이지에 숨겨짐
과잉 활용: 숨김
상위 요소의 설정 과다 ~처럼 숨겨진:
- 식별 요소 원치 않는 수평 스크롤을 유발합니다(예: 이미지 요소).
- 선택하세요 상위 요소 (예: 섹션)
- 입장 스타일 패널 > 크기
- 세트 과다 에게 숨겨진
- 스크롤 왼쪽 그리고 오른쪽 과도한 가로 스크롤이 제거되었는지 확인하려면