웹 페이지에서 텍스트나 요소가 컨테이너 크기를 초과하면(오버플로) 콘텐츠가 잘리거나 레이아웃이 깨질 수 있습니다. 이때 JavaScript의 overflowX 속성을 활용하면 콘텐츠의 왼쪽·오른쪽 가장자리 문제를 간단히 해결할 수 있습니다. 가로 방향에 스크롤을 설정하면 방문자가 화면 밖으로 밀려난 내용까지 스크롤해서 모두 읽을 수 있어 사용자 경험도 크게 향상됩니다.
예제
아래 코드를 직접 실행해 보세요. 버튼을 클릭하면 overflowX 속성으로 가로 스크롤이 설정되어, 오버플로된 콘텐츠의 좌우 가장자리가 어떻게 처리되는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 350px;
height: 150px;
background-color: orange;
border: 3px solid red;
white-space: nowrap;
margin-left: 20px;
}
</style>
</head>
<body>
<p>클릭하여 overflow 속성으로 스크롤을 설정합니다.</p>
<button type="button" onclick="display()">스크롤 설정</button>
<div id="box">
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
</div>
<br>
<br>
<script>
function display() {
document.getElementById("box").style.overflowX = "scroll";
}
</script>
</body>
</html>코드 설명
예제의 동작 원리는 다음과 같습니다.
- #box 스타일: 너비 350px, 높이 150px로 고정되어 있으며,
white-space: nowrap덕분에 문단이 줄바꿈 없이 한 줄로 이어져 가로 방향으로 넘칩니다. - display() 함수: 버튼 클릭 시
document.getElementById("box").style.overflowX = "scroll"코드가 실행되어 박스의 가로 스크롤이 활성화됩니다.
버튼을 누르기 전에는 넘치는 텍스트가 그대로 잘려 보이지만, 버튼을 클릭하면 하단에 가로 스크롤바가 나타나 숨겨진 콘텐츠까지 모두 확인할 수 있습니다. 이처럼 overflowX 속성은 콘텐츠가 가로로 넘칠 때 좌우 가장자리를 처리하는 가장 간단하고 효과적인 방법입니다.