value_jquery를 얻을 수 없는 jQuery.position() 메서드에 대한 안전한 대체 방법

jQuery.position() 메서드를 호출하면 상위 요소를 기준으로 한 위치가 반환됩니다. jQuery 공식 문서에는 .offset() 메서드와 다르다고 설명되어 있습니다. .position()은 상위 요소를 기준으로 위치를 반환합니다.

그런데 실제로 사용 중에 .position()이 반환하는 값이 0인 경우가 많다는 사실을 발견했습니다. 그러나 사실은 0이 아니다. 특히 Google Chrome 및 IE 브라우저에서는 더욱 그렇습니다. Firefox에는 이 문제가 없습니다.

이유는 Webkit 기반 브라우저(Google Chrome 및 Safari 브라우저)를 예로 들면 요소(이미지, 플래시 등)가 완전히 로드된 경우에만 브라우저가 이러한 요소의 높이와 너비에 액세스할 수 있기 때문입니다. Firefox는 DOM이 로드된 후 이러한 속성에 액세스할 수 있으며 요소의 전체 크기를 알 필요가 없습니다. Google 크롬에서는 그렇지 않습니다. 따라서 Google/IE와 같은 브라우저에서 .position()을 사용하여 요소의 오프셋을 얻으려는 경우 얻는 값은 종종 초기 값인 0입니다.

한 가지 해결 방법은 $(document).ready 이벤트 이후가 아니라 $(window).load() 이벤트가 발생한 이후에 .position() 호출을 배치하는 것입니다. 하지만 이 방법은 신뢰성이 없을 수도 있습니다.

또 다른 대안은 .offset()을 사용하여 다음을 변환하는 것입니다.

코드 복사 코드는 다음과 같습니다.

jQuery.fn.aPosition = function() {
ThisLeft = this.offset().left;
ThisTop = this.offset().top;
ThisParent = this.parent();

parentLeft = thisParent.offset().left;
parentTop = thisParent.offset().top;

반환 {
           왼쪽: thisLeft-parentLeft,
         상단: thisTop-parentTop
};
};

이로 인해 중복된 코드가 생성되기는 하지만 훨씬 더 안정적이고 안심하고 사용할 수 있습니다.