커서 위치 변수 x와 y는 일반적으로 마우스 이벤트(예: mousemove 또는 mousedown)를 통해 가져오기 때문에 먼저 전체 페이지를 기준으로 커서의 위치를 가져오는 방법을 살펴보겠습니다. 다음 두 가지 일반 함수는 현재 커서를 가져오는 데 사용됩니다. 전체 페이지를 기준으로 한 위치입니다.
//커서의 가로 위치 가져오기
function getX(e) {
//일반화된 이벤트 객체
e = e || window.event
//IE가 아닌 브라우저의 위치를 먼저 확인한 다음 IE의 위치를 확인하세요. >return e.pageX || e.clientX document.body.scrollLeft;
//커서의 수직 위치 가져오기
function getY(e) {
//일반화 event object
e = e || window.event;
//IE가 아닌 브라우저의 위치를 먼저 확인한 다음 IE의 위치를 확인하세요.
return e.pageY || body.scrollTop;
}
예를 들어 FF에서 e.pageX는 전체 페이지의 X 좌표(스크롤 막대의 스크롤 거리 포함)인 반면 IE에서는 e.clientX입니다. 현재 사용자 앞에 표시된 뷰의 X 좌표를 나타내며, 완전한 X 좌표 위치를 얻으려면 document.body.scrollLeft(가로 스크롤 막대의 거리)를 추가해야 합니다.
다음 개념은 브라우저 스크롤 막대 내의 모든 것으로 간주할 수 있는 뷰포트입니다. 뷰포트 창, 페이지, 스크롤 막대 등도 뷰포트에 포함된 일부 구성 요소입니다.
페이지 크기 가져오기:
function pageHeight() {
return document.body.scrollHeight
}
//페이지 너비 반환
function pageWidth() {
return document.body.scrollWidht;
}
scrollHeight 및 scrollWidth(보려면 클릭하세요)는 요소의 잠재적인 너비와 높이를 설명합니다. 세부 사항은 현재 보이는 크기가 아닙니다.
다음으로 스크롤 막대의 위치, 즉 뷰포트를 기준으로 페이지 상단으로부터의 거리를 가져와야 합니다.
function scrollX () {
//IE6/7의 strict 모드에서 사용되는 단축키
var de = document.documentElement
//pageXOffset 속성이 브라우저에 존재하는 경우
return self.pageXOffset ||그렇지 않으면 루트 노드의 왼쪽 스크롤 오프셋을 가져오세요.
(de && de.scrollLeft) ||마지막으로 가져오세요. 본문 요소의 왼쪽 스크롤 오프셋 Amount
document.body.scrollLeft
}
//브라우저의 세로 스크롤 위치를 결정하는 함수
function scrollY() {
//엄격 모드의 IE6/7에서 사용되는 단축키
var de = document.documentElement;
//pageYOffset 속성이 브라우저에 있으면 이를 사용하세요.
return self.pageYOffset || 🎜>//그렇지 않으면 노드의 상단 스크롤 오프셋을 가져오세요
(de && de.scrollTop) ||
//마지막으로 본문 요소의 상단 스크롤 오프셋을 가져오세요
document.body.scrollTop;
}
윈도우 객체의 속성으로 존재하는 스크롤바를 이동하는 방법을 살펴보겠습니다. 두 개의 매개변수, 즉 x 및 y 오프셋을 취합니다. 두 가지 예는
코드 복사
window.scrollTo(0, pageY(document .getElementById('content')))
pageY 함수에 익숙하지 않은 경우 이를 검토하고 전체 문서에서 요소의 위치를 얻는 데 사용할 수 있습니다. 다시 제공하고 직접 통합하세요.
코드 복사
//이전 요소를 계속 가져올 수 있으면 현재 오프셋을 늘리고 위쪽으로 계속 재귀합니다.
elem.offsetTop pageY(elem.offsetParent):
// 그렇지 않으면 get 현재 오프셋
elem.offsetTop;
}
뷰포트(viewport)의 크기를 얻는 방법을 알아보겠습니다. 사용자는 현재 볼 수 있습니다.
코드 복사