HTML DOM scrollLeft 속성 – 가로 스크롤 위치를 읽고 설정하는 방법

HTML 문서에서 DOM scrollLeft 속성은 요소의 콘텐츠가 수평(가로) 방향으로 스크롤된 픽셀 값을 반환하거나 수정할 때 사용합니다. 이 속성을 활용하면 자바스크립트만으로 요소의 가로 스크롤 위치를 확인하거나 원하는 지점으로 이동시킬 수 있습니다.

문법(Syntax)

scrollLeft 속성의 기본 문법은 다음과 같습니다.

1. scrollLeft 값 가져오기

element.scrollLeft

2. scrollLeft 값 설정하기

element.scrollLeft = value

여기서 value는 픽셀(px) 단위의 숫자 값입니다.

예제 코드

아래 예제는 scrollLeft와 scrollTop 속성을 함께 사용하여, 박스 내부에서 스크롤이 발생할 때마다 현재 가로·세로 스크롤 위치를 실시간으로 화면에 표시하는 코드입니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body{
        text-align:center;
        color:#fff;
        background: #ff7f5094;
        height:100%;
    }
    p{
        font-weight:700;
        font-size:1.8rem;
        height:80px;
        overflow:auto;
        width:150px;
        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;
    }
    #myDIV {
        height: 200px;
        width: 200px;
        overflow: auto;
        margin:20px auto;
    }
    #content {
        height: 400px;
        width: 1000px;
        background-color: lightblue;
    }
</style>
</head>
<body>
<h1>DOM scrollLeft/scrollTop Property Demo</h1>
<div id="myDIV" onscroll="display()">
<div id="content"></div>
</div>
<div class="show"></div>
<script>
    function display() {
        var elmnt = document.getElementById("myDIV");
        var x = elmnt.scrollLeft;
        var y = elmnt.scrollTop;
        document.querySelector(".show").innerHTML = "Top Scroll = " + x + "px Left Scroll = " + y + "px";
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM scrollLeft 속성 – 가로 스크롤 위치를 읽고 설정하는 방법

이제 파란색 박스 안에서 마우스 휠이나 스크롤바를 이용해 스크롤해 보세요. 스크롤할 때마다 아래 영역에 세로(Top) 스크롤 값과 가로(Left) 스크롤 값이 픽셀 단위로 실시간 갱신되어 표시됩니다.

HTML DOM scrollLeft 속성 – 가로 스크롤 위치를 읽고 설정하는 방법

정리

scrollLeft: 요소 콘텐츠가 왼쪽에서 오른쪽으로 스크롤된 픽셀 값을 읽거나 설정
scrollTop: 요소 콘텐츠가 위에서 아래로 스크롤된 픽셀 값을 읽거나 설정
onscroll 이벤트와 함께 사용하면 스크롤 위치 변화를 실시간으로 감지할 수 있음