HTML DOM의 style.overflowY 속성은 HTML 문서에서 요소 박스 내부의 콘텐츠가 위쪽 또는 아래쪽으로 넘칠(overflow) 때 어떻게 처리할지를 확인하고 설정하는 데 사용됩니다. 이 속성은 CSS의 overflow-y 속성에 대응하며, JavaScript를 통해 동적으로 세로 방향 오버플로우 동작을 제어할 수 있습니다.
문법(Syntax)
overflowY 속성의 기본 문법은 다음과 같습니다.
1. overflowY 값 가져오기
object.style.overflowY
2. overflowY 값 설정하기
object.style.overflowY = "value"
속성 값(Values)
overflowY 속성에 사용할 수 있는 값은 다음과 같습니다.
| 값 | 설명 |
|---|---|
| scroll | 콘텐츠를 잘라내고(clip), 필요한 경우 항상 스크롤바를 표시합니다. |
| auto | 콘텐츠를 잘라내고, 콘텐츠가 넘칠 때만 자동으로 스크롤바를 추가합니다. |
| hidden | 요소 박스 밖으로 흐르는 콘텐츠를 잘라내어 숨깁니다. 스크롤바는 표시되지 않습니다. |
| visible | 콘텐츠를 잘라내지 않으며, 콘텐츠가 요소 박스 밖으로 그대로 흘러나옵니다. (기본값) |
| initial | 이 속성 값을 브라우저의 기본값으로 설정합니다. |
| inherit | 부모 요소로부터 이 속성 값을 상속받습니다. |
예제(Example)
다음 예제는 버튼 클릭 시 paragraph 요소의 overflowY 속성을 scroll 값으로 변경하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
height: 100vh;
}
p {
border: 2px solid #fff;
height: 100px;
width: 200px;
}
.btn {
background: coral;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin-top: 4rem;
}
</style>
</head>
<body>
<h1>DOM Style overflowY Property Example</h1>
<p>
This is paragraph 1 with some dummy text.
This is paragraph 1 with some dummy text.
This is paragraph 1 with some dummy text.
This is paragraph 1 with some dummy text.
This is paragraph 1 with some dummy text.
This is paragraph 1 with some dummy text.
</p>
<button onclick="add()" class="btn">Change overflow</button>
<script>
function add() {
document.querySelector('p').style.overflowY = "scroll";
}
</script>
</body>
</html>
실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
Change overflow 버튼을 클릭하면 paragraph 요소에 overflowY: scroll 값이 적용되어, 고정된 높이(100px) 안에서 세로 스크롤바가 활성화된 것을 확인할 수 있습니다.
정리
overflowY 속성은 콘텐츠가 요소의 세로 경계를 벗어날 때의 표시 방식을 결정합니다. scroll은 항상 스크롤바를 보여주고, auto는 필요할 때만 스크롤바를 생성하며, hidden은 넘치는 부분을 숨깁니다. 웹 UI에서 고정 크기 영역 안에 긴 텍스트를 배치할 때 유용하게 활용할 수 있습니다.