[JS] 자바스크립트 스크롤바 위치 가져오기

 

 

 

 

 

 

 

 

📌 자바스크립트 스크롤바 위치 가져오기

 

• window 객체 사용
• HTML 요소 내부의 스크롤바 위치 가져오기

 

 

 

 

1️⃣ window 객체 사용

window 객체에 scroll 이벤트를 수신하는 eventlistener를 추가할 수 있다.

따라서 window 객체를 이용하여 아래와 같이 스크롤바의 위치를 얻을 수 있다. 

window.addEventListener("scroll", (event) => {
    let scrollY = this.scrollY;
    let scrollX = this.scrollX;
    console.log(scrollY);
    console.log(scrollX);
});

 

 

 

 

2️⃣ HTML 요소 내부의 스크롤바 위치 가져오기

window 스크롤바의 위치가 아닌 HTML 태그 내 요소에 존재하는 스크롤바의 위치를 가져와야 경우가 있다.

<div id="ContentContainer" onscroll="getScrollPoistion()">
   <div id="content">스크롤 이벤트</div>
</div>

<script>
   function getScrollPoistion() {
      let ContainerElement = document.getElementById("ContentContainer");
      let x = ContainerElement.scrollLeft;
      let y = ContainerElement.scrollTop;
      console.log(x);
      console.log(y);
    }
</script>

 

1. ContentContainer의 id를 가진 요소는 onscroll 속성을 갖는다.

2. 요소 내부를 스크롤할 때마다 getScrollPosition 이 실행된다.

3. ContentContainer의 스크롤된 위치를 가져온다.