JavaScript 및 CSS 복습(3)_javascript 기술

//커서의 가로 위치 가져오기
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(가로 스크롤 막대의 거리)를 추가해야 합니다.

return document.body.scrollHeight
}
//페이지 너비 반환
function pageWidth() {
return document.body.scrollWidht;
}


scrollHeight 및 scrollWidth(보려면 클릭하세요)는 요소의 잠재적인 너비와 높이를 설명합니다. 세부 사항은 현재 보이는 크기가 아닙니다.

//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 오프셋을 취합니다. 두 가지 예는

pageY 함수에 익숙하지 않은 경우 이를 검토하고 전체 문서에서 요소의 위치를 ​​얻는 데 사용할 수 있습니다. 다시 제공하고 직접 통합하세요.

elem.offsetTop pageY(elem.offsetParent):
// 그렇지 않으면 get 현재 오프셋
elem.offsetTop;
}


뷰포트(viewport)의 크기를 얻는 방법을 알아보겠습니다. 사용자는 현재 볼 수 있습니다.