브라우저 뷰포트에 상대적인 요소의 맨 위 위치를 가져오려면 어떻게 해야 합니까?

브라우저 뷰포트에 상대적인 요소의 맨 위 위치를 가져오려면 어떻게 해야 합니까?

브라우저 뷰포트(페이지 전체가 아닌 페이지가 표시되는 뷰포트)에 상대적인 요소의 위치를 가져오고 싶다.JavaScript에서는 어떻게 할 수 있을까요?

대단히 고맙습니다

기존의 답변들은 이제 구식이 되었다. ★★★★getBoundingClientRect()이 방법은 꽤 오랫동안 사용되어 왔으며 질문에 정확히 부합합니다.제5회입니다.

MDN 페이지에서:

반환되는 값은 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;

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

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

편집: 페이지 스크롤에 사용할 코드를 추가합니다.

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입니다.퀴크스 모드 포스트에서 개작.

을 꽤합니다.jQuery query는는 query query query query query query query query query query query query 。jQuery 소스를 offset 구현이 됩니다.

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

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

function inViewport(element) {
    let bounds = element.getBoundingClientRect();
    let viewWidth = document.documentElement.clientWidth;
    let viewHeight = document.documentElement.clientHeight;

    if (bounds['left'] < 0) return false;
    if (bounds['top'] < 0) return false;
    if (bounds['right'] > viewWidth) return false;
    if (bounds['bottom'] > viewHeight) return false;

    return true;
}

원천

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

    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;
}

다음 작업을 수행할 수 있습니다.

node.offsetTop - window.scrollY

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

답변해 주셔서 감사합니다.프로토타입에는 이미 이 기능을 하는 기능이 있는 것 같습니다(page() 함수).함수의 소스 코드를 보면 먼저 페이지(즉, 문서 상단)에 대한 요소 오프셋 위치를 계산한 다음, 여기서 스크롤 탑을 빼는 것을 알 수 있습니다.자세한 내용은 프로토타입의 소스 코드를 참조하십시오.

가 '이다'인 .btn1jQuery 。이 기능은 Chrome, FireFox, IE >=9 및 Edge의 모든 최신 브라우저에서 작동합니다.jQuery는 문서와 관련된 위치를 확인하는 데만 사용됩니다.

var screenRelativeTop =  $("#btn1").offset().top - (window.scrollY || 
                                            window.pageYOffset || document.body.scrollTop);

var screenRelativeLeft =  $("#btn1").offset().left - (window.scrollX ||
                                           window.pageXOffset || document.body.scrollLeft);

가끔씩getBoundingClientRect()오브젝트 속성 값은 IE의 경우 0으로 표시됩니다.이 경우, 설정해 둘 필요가 있습니다.display = 'block'에 대응하고 있습니다.모든 브라우저에 대해 아래 코드를 사용하여 오프셋을 얻을 수 있습니다.

jQuery 기능 확장:

(function($) {
    jQuery.fn.weOffset = function () {
        var de = document.documentElement;
        $(this).css("display", "block");
        var box = $(this).get(0).getBoundingClientRect();
        var top = box.top + window.pageYOffset - de.clientTop;
        var left = box.left + window.pageXOffset - de.clientLeft;
        return { top: top, left: left };
    };
}(jQuery));

사용방법:

var elementOffset = $("#" + elementId).weOffset();

데릭의 대답에 따르면

/**
 * Gets element's x position relative to the visible viewport.
 */
function getAbsoluteOffsetLeft(el) {
  let offset = 0;
  let currentElement = el;

  while (currentElement !== null) {
    offset += currentElement.offsetLeft;
    offset -= currentElement.scrollLeft;
    currentElement = currentElement.offsetParent;
  }

  return offset;
}

/**
 * Gets element's y position relative to the visible viewport.
 */
function getAbsoluteOffsetTop(el) {
  let offset = 0;
  let currentElement = el;

  while (currentElement !== null) {
    offset += currentElement.offsetTop;
    offset -= currentElement.scrollTop;
    currentElement = currentElement.offsetParent;
  }

  return offset;
}

여기 Angular2+가 있어요.버전 13에서 테스트 완료

event.srcElement.getBoundingClientRect().top;

언급URL : https://stackoverflow.com/questions/1350581/how-to-get-an-elements-top-position-relative-to-the-browsers-viewport