[javascript] 브라우저의 뷰포트를 기준으로 요소의 최상위 위치를 얻는 방법은 무엇입니까?

브라우저의 뷰포트 (페이지 전체가 아닌 페이지가 표시되는 뷰포트)를 기준으로 요소의 위치를 가져 오려고합니다. JavaScript로 어떻게 이것을 할 수 있습니까?

많은 감사

답변

기존 답변은 이제 구식입니다. 기본 getBoundingClientRect()방법은 꽤 오랫동안 사용되어 왔으며 질문이 요구하는 것을 정확하게 수행합니다. 또한 모든 브라우저에서 지원됩니다 (IE 5 포함).

반환 값은 TextRectangle 객체로, 뷰포트의 왼쪽 상단을 기준으로 왼쪽 상단을 기준으로 테두리 상자를 설명하는 읽기 전용 왼쪽, 위쪽, 오른쪽 및 아래쪽 속성을 픽셀 단위로 포함합니다 .

당신은 그렇게 사용합니다 :

var viewportOffset = el.getBoundingClientRect();
// these are relative to the viewport, i.e. the window
var top = viewportOffset.top;
var left = viewportOffset.left;

답변

필자의 경우 스크롤과 관련하여 안전하기 위해 window.scroll을 방정식에 추가했습니다.

var element = document.getElementById('myElement');
var topPos = element.getBoundingClientRect().top + window.scrollY;
var leftPos = element.getBoundingClientRect().left + window.scrollX;

그러면 스크롤 된 경우에도 문서에서 요소의 실제 상대 위치를 얻을 수 있습니다.

답변

편집 : 페이지 스크롤을 설명하는 코드를 추가하십시오.

function findPos(id) {
    var node = document.getElementById(id);
    var curtop = 0;
    var curtopscroll = 0;
    if (node.offsetParent) {
        do {
            curtop += node.offsetTop;
            curtopscroll += node.offsetParent ? node.offsetParent.scrollTop : 0;
        } while (node = node.offsetParent);

        alert(curtop - curtopscroll);
    }
}

id 인수는 오프셋을 원하는 요소의 id입니다. quirksmode 포스트 에서 적응시키는 .

답변

var element =  document.querySelector('selector');
var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

답변

당신은 시도 할 수 있습니다:

node.offsetTop - window.scrollY

뷰포트 메타 태그가 정의 된 Opera에서 작동합니다.

답변

jQuery는 이것을 매우 우아하게 구현합니다. jQuery의 소스를 보면 offset기본 구현 방법을 알 수 있습니다.

var rect = elem.getBoundingClientRect();
var win = elem.ownerDocument.defaultView;

return {
    top: rect.top + win.pageYOffset,
    left: rect.left + win.pageXOffset
};

답변

이 페이지 의 함수 는 브라우저보기 포트를 기준으로 전달 된 요소의 상단, 왼쪽, 높이 및 너비 좌표가있는 사각형을 반환합니다.

    localToGlobal: function( _el ) {
       var target = _el,
       target_width = target.offsetWidth,
       target_height = target.offsetHeight,
       target_left = target.offsetLeft,
       target_top = target.offsetTop,
       gleft = 0,
       gtop = 0,
       rect = {};

       var moonwalk = function( _parent ) {
        if (!!_parent) {
            gleft += _parent.offsetLeft;
            gtop += _parent.offsetTop;
            moonwalk( _parent.offsetParent );
        } else {
            return rect = {
            top: target.offsetTop + gtop,
            left: target.offsetLeft + gleft,
            bottom: (target.offsetTop + gtop) + target_height,
            right: (target.offsetLeft + gleft) + target_width
            };
        }
    };
        moonwalk( target.offsetParent );
        return rect;
}