JavaScript 및 CSS 복습(3)_javascript 기술

커서 위치 변수 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(보려면 클릭하세요)는 요소의 잠재적인 너비와 높이를 설명합니다. 세부 사항은 현재 보이는 크기가 아닙니다.

다음으로 스크롤 막대의 위치, 즉 뷰포트를 기준으로 페이지 상단으로부터의 거리를 가져와야 합니다.

코드 복사 코드는 다음과 같습니다.//가로 스크롤 위치를 결정하는 함수 browser

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,0)//스크롤이 필요한 경우 이렇게 할 수 있습니다. 지정된 요소에 대해 다음을 수행할 수 있습니다.

window.scrollTo(0, pageY(document .getElementById('content')))

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

코드 복사

코드는 다음과 같습니다. //요소의 Y 위치 가져오기function pageY(elem) { //루트 요소에 있는지 확인 return elem.offsetParent?

//이전 요소를 계속 가져올 수 있으면 현재 오프셋을 늘리고 위쪽으로 계속 재귀합니다.

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


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

코드 복사

코드는 다음과 같습니다.

//뷰포트 높이 가져오기
function windowHeight() {
//IE6/7의 엄격 모드에서 사용되는 단축키
var de = document.documentElement
/ / 브라우저에 innerHeight 속성이 있으면 이를 사용하세요.
return self.innerHeight ||그렇지 않으면 루트 노드 높이를 가져오세요.
(de && de.clientHeight) || /마지막으로 본문 요소
document.body.clientHeight
}

//뷰포트 너비 가져오기
function windowWidth() {
//IE6/7의 엄격 모드에서 사용되는 단축키
var de = document.documentElement
//innerWidth 속성이 브라우저에 있으면 이를 사용하세요.
return self.innerWidth || >//그렇지 않으면 루트 노드의 너비를 가져옵니다.
(de && de.clientWidth) ||
//마지막으로 본문 요소의 너비를 가져옵니다.
document.body.clientWidth ;
}



innerHeight

,
clientHeight 등과 같은 속성에 대해 약간의 의문이 있을 수 있습니다. Mozilla 개발자 센터에 매우 명확하게 설명되어 있습니다. 마지막으로 현재 웹 프런트엔드에서도 매우 인기 있는 더 흥미로운 효과에 대해 이야기하겠습니다. 저자는 구체적인 구현을 제공하지 않았지만 좋은 js 라이브러리를 인용했습니다. dom-drag .js에서는 전문가의 소스 코드를 배울 수 있으며, jquery를 비롯한 여러 인기 js 라이브러리도 소개합니다. 자, javascript와 css에 대한 리뷰입니다. 궁금한 점이 있으면 토론을 위해 메시지를 남겨주세요.