JavaScript로 스크롤바 위치 얻기
이 자습서에서는 JavaScript에서 스크롤 막대 위치를 가져오는 방법에 대해 설명하고 다음 사항에 대해 설명합니다.
- 스크롤바와 스크롤바 위치란?
window객체를 사용하여 스크롤바 위치를 얻는 방법- 요소 내에서 스크롤바 위치를 얻는 방법
스크롤바 및 스크롤바 위치란?
직사각형 모양의 막대는 일반적으로 사용자가 스크롤할 수 있는 브라우저 창의 맨 아래 또는 맨 오른쪽 끝에 있으며, 이에 따라 사용자의 보기 영역이 위치하게 됩니다. 많은 사용자가 더 많은 콘텐츠를 보기 위해 거의 모든 웹페이지에서 위아래로 스크롤해야 하기 때문에 매일 스크롤바를 사용합니다.
스크롤 막대는 창 보기 영역의 수평 또는 수직 위치로, 사용자가 왼쪽 또는 위에서 스크롤한 정도를 의미합니다. 기본적으로 스크롤 위치는 왼쪽에서 0px이고 상단에서 0px입니다.
JavaScript의 window 개체를 사용하여 스크롤 막대 위치 가져오기
window 객체를 사용하여 창에서 스크롤바 위치를 얻을 수 있습니다. window 개체는 다른 JavaScript 개체와 같기 때문에 scroll 이벤트를 수신하는 EventListener를 추가할 수 있습니다.
window.addEventListener('scroll', (event) => {
let scrollY = this.scrollY;
let scrollX = this.scrollX;
console.log(scrollY);
console.log(scrollX);
});
이 컨텍스트에서 this는 window 객체라고 합니다. scrollY는 window의 속성으로, 창 보기 영역이 위에서 스크롤되어 픽셀 수를 알려줍니다. scrollX는 사용자가 왼쪽에서 얼마나 스크롤했는지 알려주는 window 객체의 속성입니다.
JavaScript에서 요소 내부의 스크롤 막대 위치 가져오기
전체 창의 스크롤 위치가 아니라 요소에 상대적인 스크롤 위치를 가져와야 하는 특정 시나리오가 있습니다. 이를 수행하는 예를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#ContentContainer {
height: 250px;
width: 250px;
overflow: auto;
}
#content {
height: 500px;
width: 1000px;
background-color: red;
}
</style>
</head>
<body>
<div id="ContentContainer" onscroll="getScrollPoistion()">
<div id="content">Content to Scroll</div>
</div>
<script>
function getScrollPoistion() {
var ContainerElement = document.getElementById("ContentContainer");
var x = ContainerElement.scrollLeft;
var y = ContainerElement.scrollTop;
console.log(x); // scroll position from Left
console.log(y); // scroll position from top
}
</script>
</body>
</html>
위의 코드 세그먼트에서 ContentContainer의 id를 가진 요소는 onscroll 속성을 갖습니다. 사용자가 요소 내부를 스크롤할 때마다 getScrollPosition 기능이 실행됩니다.
getScrollPosition이 하는 일은 콘텐츠 요소의 컨테이너를 가져오고 왼쪽에서 스크롤된 위치를 가져온 다음 위쪽에서 스크롤된 위치를 가져오는 것입니다.