자바스크립트(Javascript) 현재 브라우저 화면의 스크롤 위치 알아내기

현재 화면의 스크롤 위치는 웹 페이지에서 사용자가 스크롤하여 화면을 이동했을 때, 수직 및 수평 스크롤바의 위치를 나타내는 값입니다. 이를 자바스크립트로 얻을 수 있으며, 주로 웹 페이지에서 스크롤 위치에 따라 다양한 동작을 수행할 때 사용됩니다. 아래 사용 사례는 현재 화면의 스크롤 위치를 가져오고, 이를 기반으로 다양한 동작을 수행하는 방법을 보여줍니다.

 

 

 

◎ 1. 사용 구문

 

주어진 코드는 자바스크립트를 사용하여 현재 화면의 수직 및 수평 스크롤 위치를 가져오는 코드를 나타냅니다. 코드에서는 브라우저 호환성을 고려하여 다양한 속성을 확인하고, 사용 가능한 속성을 통해 수직 및 수평 스크롤 위치를 가져오게 됩니다. 이렇게 얻은 값을 변수에 저장하여 다양한 스크롤 위치 관련 작업에 활용할 수 있습니다.

var scrollTop = window.pageYOffset || 
	document.documentElement.scrollTop || 
    document.body.scrollTop;
var scrollLeft = window.pageXOffset || 
	document.documentElement.scrollLeft || 
    document.body.scrollLeft;

 

 

“scrollTop” 변수에는 위의 세 가지 속성 중 하나가 사용 가능한 경우 해당 값을 저장합니다.

l  “window.pageYOffset”: 최신 브라우저에서 사용하는 스크롤 위치 속성입니다. 맨 위에서부터 스크롤한 거리를 픽셀 단위로 나타냅니다.

l  “document.documentElement.scrollTop”: 브라우저의 문서 요소(document.documentElement)의 수직 스크롤 위치를 가져옵니다. 일부 오래된 브라우저에서 사용될 수 있습니다.

l  “document.body.scrollTop”: “document.documentElement.scrollTop” 대신 일부 오래된 브라우저에서 사용될 수 있는 다른 방법입니다.

 

“scrollLeft” 변수는 세 가지 속성 중 하나가 사용 가능한 경우 해당 값을 저장합니다.

l  “window.pageXOffset”: 대부분의 최신 브라우저에서 사용되는 수평 스크롤 위치 속성입니다. 맨 왼쪽에서부터 스크롤한 거리를 픽셀 단위로 나타냅니다.

l  “document.documentElement.scrollLeft”: 브라우저의 문서 요소(document.documentElement)의 수평 스크롤 위치를 가져옵니다. 일부 오래된 브라우저에서 사용될 수 있습니다.

l  “document.body.scrollLeft”: “document.documentElement.scrollLeft” 대신 일부 오래된 브라우저에서 사용될 수 있는 다른 방법입니다.

 

 

◎ 2. 수직 스크롤 위치 가져오기

 

현재 웹 페이지의 수직 스크롤 위치를 가져오는 코드입니다. “scrollTop” 변수에 스크롤 위치가 저장되며, 이 값은 페이지의 맨 위에서부터 스크롤한 거리를 나타냅니다.

 

var scrollTop = window.pageYOffset || 
	document.documentElement.scrollTop || 
    	document.body.scrollTop;
console.log("수직 스크롤 위치: " + scrollTop);
 
[출력]
수직 스크롤 위치: 100

 

 

◎ 3. 수평 스크롤 위치 가져오기

 

현재 웹 페이지의 수평 스크롤 위치를 가져오는 코드입니다. “scrollLeft” 변수에 스크롤 위치가 저장되며, 이 값은 페이지의 맨 왼쪽에서부터 스크롤한 거리를 나타냅니다.

 

var scrollLeft = window.pageXOffset || 
	document.documentElement.scrollLeft || 
    	document.body.scrollLeft;
console.log("수평 스크롤 위치: " + scrollLeft);
 
[출력]
수평 스크롤 위치: 50

 

 

◎ 4. 스크롤 위치에 따른 동작 수행

 

스크롤 위치가 200 이상일 때 추가 동작을 수행하는 코드입니다. “scroll” 이벤트를 사용하여 스크롤 위치를 실시간으로 감시하고, 스크롤 위치가 200 이상인 경우 메시지를 출력합니다.

 

window.addEventListener("scroll", function() {
    var scrollTop = window.pageYOffset || 
    	document.documentElement.scrollTop || 
        document.body.scrollTop;
   
    if (scrollTop > 200) {
        console.log("스크롤 위치가 200 이상입니다. 추가 동작 수행");
    }
});