Horizontal Scroll UI Style (수평,가로 스크롤 UI)

Overflow Scroll UI

overflow 속성을 이용하여 스크롤을 생성하는 방법은 간단하지만 일반적으로 스크롤되는 콘텐츠의 전체 너비값을 부여하여 자식요소를 스크롤시키곤 합니다.

하지만 스크롤 되는 콘텐츠의 전체 너비값이 정해져 있지 않을 경우엔 어떻게 해야할까요?

예를 들어 스크롤되는 콘텐츠 내 박스의 내용이 짧아질 수도 길어질 수도 있는 UI 라면 전체 너비값을 선언하는 것이 무의미할 것입니다.

이를 스크립트로 처리하는 방법이 있겠지만 CSS 만으로도 간단히 해결할 수 있습니다.

white-space: nowrap

위에서 언급한 스크롤 UI 에 대한 요구사항을 만족시키기 위해서 white-space: nowrap; CSS 속성값을 사용할 수 있습니다.

다음의 소스를 통해 살펴보시기 바랍니다.

See the Pen overflow scroll UI by jaeheekim (@jaehee) on CodePen.

Jaehee's WebClub