DOM scrollWidth 속성은 HTML 문서에서 요소의 전체 너비를 픽셀(px) 단위로 반환합니다. 여기서 말하는 '전체 너비'는 화면에 실제로 보이는 영역뿐만 아니라 오버플로우(overflow)로 인해 스크롤 뒤에 숨겨진 콘텐츠 영역까지 포함하며, 콘텐츠(content)와 안쪽 여백(padding)을 합산한 값입니다.
scrollWidth 속성의 주요 특징
- 요소의 내용이 넘칠 경우, 보이지 않는 영역까지 포함한 전체 너비를 반환합니다.
- padding은 포함되지만 border(테두리)와 margin(바깥 여백)은 제외됩니다.
- 반환값은 반올림된 정수 형태입니다.
- 읽기 전용(read-only) 속성이므로 직접 값을 설정할 수 없습니다.
구문
scrollWidth 속성의 기본 구문은 다음과 같습니다 −
element.scrollWidth
예제
다음 예제는 scrollWidth 속성을 활용하여 문단(<p>) 요소의 스크롤 너비와 높이를 확인하는 방법을 보여줍니다 −
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: #ff7f5094;
height:100%;
}
p{
font-weight:700;
font-size:1.2rem;
height:80px;
border:1px solid #fff;
overflow:auto;
width:250px;
margin:20px auto;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
.show{
font-size:1.5rem;
}
</style>
</head>
<body>
<h1>DOM scrollHeight/scrollWidth Property Demo</h1>
<p>Hi!I'm a para element in HTML with some dummy text.
Hi!I'm a para element in HTML with some dummy text.
Hi!I'm a para element in HTML with some dummy text.
Hi!I'm a para element in HTML with some dummy text.</p>
<button onclick="getHW()" class="btn">Get paragraph height & width</button>
<div class="show"></div>
<script>
function getHW() {
var para = document.querySelector('p');
document.querySelector(".show").innerHTML="<div>Para Height = "+para.scrollHeight+" px</div><div>Para Width = "+ para.scrollWidth+" px</div>";
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다 −
“파란색” 버튼을 클릭하면 문단 요소의 스크롤 너비(scrollWidth)와 높이(scrollHeight)가 화면 하단에 표시됩니다.
유사 속성과의 비교
scrollWidth와 함께 자주 사용되는 관련 속성들을 비교하면 다음과 같습니다.
- clientWidth: 스크롤바를 제외한 콘텐츠 + padding의 너비를 반환합니다.
- offsetWidth: border(테두리)까지 포함한 요소의 전체 너비를 반환합니다.
- scrollWidth: 스크롤로 가려진 영역까지 포함한 콘텐츠 + padding의 전체 너비를 반환합니다.
요소 내부의 숨겨진 콘텐츠 크기를 파악해야 하는 무한 스크롤, 동적 콘텐츠 로딩 등의 기능을 구현할 때 scrollWidth 속성이 유용하게 활용됩니다.