Javascript는 문서 좌표와 뷰포트 좌표를 얻습니다_javascript 기술

요소의 위치는 픽셀 단위로 측정되며 X 좌표는 오른쪽으로 증가하고 Y 좌표는 아래로 증가합니다. 그러나 좌표계의 원점은 X 및 Y 좌표라는 두 가지 지점이 있습니다. 요소는 문서의 왼쪽 위 모서리에 상대적이거나 문서가 표시되는 뷰포트의 왼쪽 위 모서리에 상대적일 수 있습니다.

등급이 지정된 창과 탭에서 "뷰포트"는 실제로 문서의 내용을 표시하는 브라우저의 일부일 뿐이며 브라우저의 "셸"(예: 메뉴, 도구 모음, 탭)은 포함되지 않습니다.

프레임에 표시되는 문서의 경우 프레임 페이지의 d5ba1642137c3f32f4f4493ae923989c 요소가 지정됩니다. 어쨌든 요소의 위치를 ​​논의할 때 사용된 좌표가 문서 좌표인지 뷰포트 좌표인지 명확히 하는 것이 중요합니다. (뷰포트 좌표는 창 좌표라고도 합니다.)

문서가 뷰포트보다 작거나 아직 스크롤이 발생하지 않은 경우 문서의 왼쪽 상단이 뷰포트의 왼쪽 상단이며 문서와 뷰포트 좌표계는 동일합니다. 그러나 일반적으로 두 좌표계 간을 변환하려면 스크롤 오프셋을 더하거나 빼야 합니다. 예를 들어 요소의 Y 좌표가 문서 좌표에서 200픽셀이고 사용자가 브라우저를 75픽셀 아래로 스크롤한 경우 뷰포트 좌표에서 요소의 Y 좌표는 125픽셀입니다. 마찬가지로 요소의 X 좌표가 뷰포트 좌표에서 400픽셀이고 사용자가 뷰포트를 가로로 200픽셀 스크롤한 경우 문서 좌표에서 요소의 X 좌표는 600픽셀입니다.

문서 좌표는 뷰포트 좌표보다 더 기본적이며 사용자가 스크롤해도 변경되지 않습니다. 그러나 클라이언트측 프로그래밍에서는 뷰포트 좌표를 사용하는 것이 매우 일반적입니다. CSS를 사용하여 요소의 위치를 ​​지정할 때 문서 좌표가 사용됩니다. 그러나 요소의 위치를 ​​쿼리하는 가장 간단한 방법은 getBoundingClientRect()가 뷰포트 좌표로 위치를 반환하는 것입니다. 마찬가지로, 마우스 이벤트에 대한 이벤트 핸들러 함수를 등록하면 보고된 마우스 포인터의 좌표는 뷰포트 좌표계에 있습니다.

좌표계로 변환하려면 브라우저 창의 스크롤 막대 위치를 결정해야 합니다. Window 객체의 pageXoffset 및 pageYOffset 속성은 IE8 이하를 제외한 모든 브라우저에서 이러한 값을 제공합니다. IE(및 모든 최신 브라우저)는 scrollLeft 및 scrollTop 속성을 통해 스크롤바 위치를 얻을 수도 있습니다. 혼란스러운 점은 일반적으로 문서의 루트 노드(document.documentElement)를 검색하여 이러한 속성을 얻지만, 이상한 모드에서는 문서의 6c04bd5ca3fcae76e30b72ad730ca86d 요소(documeng.body)에서 해당 속성을 쿼리해야 한다는 것입니다. 다음은 스크롤바의 위치를 ​​쉽게 쿼리하는 방법을 보여줍니다.

functon getScrollOffsets(w){
  w = w || window;
  var sLeft,sTop;
  if(w.pageXOffset != null) {
    sLeft = w.pageXOffset;
    sTop = w.pageYOffset;
    return {x:sLeft,y:sTop};
  }
  if(document.compatMode == "CSS1Compat"){
    sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft; 
    sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;  
    return {x:sLeft,y:sTop};
  }else if(document.compatMode == "BackCompat"){
    sLeft = document.body.scrollLeft; 
    sTop = document.body.scrollTop;
    return {x:sLeft,y:sTop};  
  }
}

예를 들어 현재 문서의 어느 부분이 표시되는지 확인하기 위해 뷰포트의 크기를 확인하는 것이 유용한 경우가 있습니다. 스크롤 오프셋을 사용하여 뷰포트의 크기를 쿼리하는 간단한 방법은 IE8 및 이전 버전에서는 작동하지 않으며 IE에서 작동하는 기술의 기능은 브라우저가 이상한 모드인지 표준 모드인지에 따라 다릅니다.

창 아래 속성:

innerHeight: 스크롤바를 포함한 창 내용 부분의 높이

innerWidth: 스크롤바를 포함한 창 내용 부분의 너비

outerHeight: 인터페이스의 모든 구성 요소를 포함한 전체 브라우저의 높이입니다.

outerWidth: 인터페이스의 모든 구성 요소를 포함한 전체 브라우저의 너비입니다.

pageXOffset: 브라우저 창 스크롤 막대의 X축 위치

pageYOffset: 브라우저 창 스크롤 막대의 Y축 위치

scrollX: 브라우저 창 스크롤 막대의 X축 위치

scrollY: 브라우저 창 스크롤 막대의 Y축 위치

속성

document.documentElement document.body
clientHeight 스크롤 부분과 스크롤 막대를 제외하고 뷰포트에 표시되는 콘텐츠의 크기입니다.
클라이언트 너비
클라이언트왼쪽　
클라이언트탑
스크롤 막대를 포함한 offsetHeight 콘텐츠 크기.
오프셋 너비
오프셋왼쪽
오프셋탑
scrollHeight 스크롤 부분을 포함하지만 스크롤 막대는 포함하지 않는 스크롤 내용의 크기입니다.
스크롤 너비
스크롤탑
스크롤 너비

쿼리 창의 뷰포트 크기:

function getViewportSize(w){
　　w = w || window;
　　var cWidth,cHeight;
　　if(w.innerWidth != null){
　　　　cWidth = w.innerWidht;
　　　　cHeight = w.innerHeight;
　　　　return {w:cWidth,h:w.cHeight};
　　}
　　if(document.compatMode == "CSS1Compat"){
　　　　cWidth = document.documentElement.clientWidth;
　　　　cHeight = doument.documentElement.clientHeight;
　　　　return {w:cWidth,h:w.cHeight};
　　}else if(document.compatMode == "BackCompat"){
　　　　cWidth = document.body.clientWidth;
　　　　cHeight = doument.body.clientHeight;
　　　　return {w:cWidth,h:w.cHeight};
　　}
}

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.