Javascript - 화면, 웹페이지, 요소의 위치

서론

Javascript로 웹 페이지를 다루다 보면 화면, 웹페이지, 요소들의 위치 값을 구해야 하는 경우가 많이 발생합니다.

본문에서 각각에 대한 위치정보를 어떻게 알아볼 수 있는지 확인해 봅시다.

 

화면의 폭과 높이

우선 화면 즉, 표시되는 출력장치의 폭과 높이를 알아보도록 하겠습니다.

PC로 보고 있다면 보고 있는 여러분의 모니터가 됩니다.

console.log(window.screen.height); // 화면의 높이
console.log(window.screen.width);  // 화면의 폭

 

웹 브라우저의 폭과 높이

사용자들은 웹브라우저가 출력되는 화면은 자유롭게 조정할 수 있습니다.

전체 화면 모드를 사용하던가, 창을 최대화를 하거나 사용자 지정의 크기로 사용하는 등 말입니다.

심지어 스크롤바 또는 위의 메뉴바 등의 위치도 다를 수 있습니다.

console.log(window.outerHeight);//웹브라우저 전체의 높이
console.log(window.outerWidth);//웹브라우저 전체의 폭
console.log(window.innerHeight);//페이지가 보이는 영역의 높이
console.log(window.innerWidth);//페이지가 보이는 영역의 폭

웹 페이지 전체의 폭과 높이

웹브라우저는 설정된 웹 브라우저의 크기만큼만 보입니다. 하지만 웹페이지는 그것보다 훨씬 더 많은 길이의 페이지일 수 있습니다. 사용자는 보통 스크롤을 통해 페이지를 내려서 볼 수 있습니다.

이런 웹 페이지의 전체 폭과 높이를 알 수 있습니다.

console.log(document.documentElement.scrollWidth) //웹페이지의 폭
console.log(document.documentElement.scrollHeight) //웹페이지의 높이

요소 또는 태그들의 위치

앞서 알아본 웹페이지의 안에는 다양한 요소들이 배치됩니다. 이 요소들의 물리적 위치 또한 알 수 있습니다.

//요소 선택하기
const tag = document.querySelector('h1');

//웹페이지에서 요소의 위치정보 
console.log(tag.offsetHeight);
console.log(tag.offsetLeft);
console.log(tag.offsetWidth);
console.log(tag.offsetTop);

스크롤의 위치

웹페이지가 길어진다면 우리는 웹브라우저에서 웹페이지를 스크롤을 통해 내려다봅니다. 

이 스크롤의 위치 또한 얻을 수 있습니다.

console.log(window.scrollY); // 세로 스크롤바의 위치

 

 

간단한 응용 해보기

위의 내용을 적절히 조합한다면, 다양한 요소들의 위치정보를 얻는 데는 크게 문제가 없습니다.

간단하게 응용해서 위치정보를 얻는 방법을 알아봅시다.

    const elementposition = function(){
        const BrowserSize = window.innerHeight;
        const ScrollPos = window.scrollY;
        const PageSize = document.documentElement.scrollHeight;
        const CurrentBrowserST = ScrollPos;
        const CurrentBrowserEND = ScrollPos+BrowserSize;

		const Htags = document.querySelectorAll('h1,h2,h3,h4');
        for(let i = 0 ; i < Htags.length; i++){
            let ArticleST = Htags[i].offsetTop+Htag_Article[i].offsetHeight;
            let ArticleEND = (i == Htags.length-1)?PageSize:Htags[i+1].offsetTop;
            let ArticleSize = ArticleEND-ArticleST;
            let ActiveArea = (ArticleEND - CurrentBrowserEND)>0?(ArticleSize - (ArticleEND - CurrentBrowserEND)):ArticleSize;
            let ActiveRatio = ActiveArea/ArticleSize;
        }
    }