jQuery를 사용하지 않고 요소의 오프셋().top 값을 얻으려면 어떻게 해야 합니까?

jQuery를 사용하지 않고 요소의 오프셋().top 값을 얻으려면 어떻게 해야 합니까?

Angular 프레임워크를 사용하여 한 페이지짜리 응용 프로그램을 프로그래밍하고 있습니다.처음 들어봐요.jQuery와 Angular의 근본적인 차이점을 이해하기 위해 이 가이드를 읽었으며, 가능한 한 이 지침을 따르고 jQuery를 사용하지 않도록 하겠습니다.

단, jQuery는 브라우저의 비호환성을 회피하고 다음과 같이 창의 상단에서 요소의 상단 위치를 알 수 있는 등의 유용한 함수 라이브러리를 제공합니다.$('element').offset().top이 기능을 다시 쓰지 않고서는 쉽게 접근할 수 없는 자바스크립트는 없는 것 같습니다.어느 시점에서 라이브러리와 같은 jQuery 또는 jQuery를 사용하는 것이 더 좋지 않을까요?

구체적으로는 윈도우의 특정 위치로 스크롤하면 요소를 제자리에 고정하는 디렉티브를 설정하려고 합니다.예를 들어 다음과 같습니다.

directives.scrollfix = function () {
    return {
        restrict: 'C',
        link: function (scope, element, $window) {

            var $page = angular.element(window)
            var $el   = element[0]
            var elScrollTopOriginal = $($el).offset().top - 40

            $page.bind('scroll', function () {

                var windowScrollTop = $page[0].pageYOffset
                var elScrollTop     = $($el).offset().top

                if ( windowScrollTop > elScrollTop - 40) {
                    elScrollTopOriginal = elScrollTop - 40
                    element.css('position', 'fixed').css('top', '40px').css('margin-left', '3px');
                }
                else if ( windowScrollTop < elScrollTopOriginal) {
                    element.css('position', 'relative').css('top', '0').css('margin-left', '0');
                }
            })

        }
    }
}

Angular에서 이 문제를 해결할 수 있는 더 좋은 방법이 있다면 조언해 주시면 감사하겠습니다.

을 사용하다$el는 실제 DOM 오브젝트입니다.

var top = $el.getBoundingClientRect().top;

JSFiddle

Fidle은 jquery의 오프셋 상단이 제공하는 것과 동일한 값을 얻을 수 있음을 보여 줍니다.

편집: 코멘트에서 설명한 바와 같이 스크롤된 콘텐츠는 고려되지 않습니다.다음은 jQuery가 사용하는 코드입니다.

https://github.com/jquery/jquery/blob/master/src/offset.js (2015년 5월 13일)

offset: function( options ) {
    //...

    var docElem, win, rect, doc,
        elem = this[ 0 ];

    if ( !elem ) {
        return;
    }

    rect = elem.getBoundingClientRect();

    // Make sure element is not hidden (display: none) or disconnected
    if ( rect.width || rect.height || elem.getClientRects().length ) {
        doc = elem.ownerDocument;
        win = getWindow( doc );
        docElem = doc.documentElement;

        return {
            top: rect.top + win.pageYOffset - docElem.clientTop,
            left: rect.left + win.pageXOffset - docElem.clientLeft
        };
    }
}

jQuery 없이 실행할 수 있는 함수는 다음과 같습니다.

function getElementOffset(element)
{
    var de = document.documentElement;
    var box = element.getBoundingClientRect();
    var top = box.top + window.pageYOffset - de.clientTop;
    var left = box.left + window.pageXOffset - de.clientLeft;
    return { top: top, left: left };
}

각도 요소에서 받침 방법을 사용하면 될 것 같습니다.

var top = $el.prop('offsetTop');

저는 좋아요.이것의 단점을 아는 사람이 있나요?

패트릭 에반스가 인정한 솔루션은 스크롤을 고려하지 않습니다.나는 이것을 보여주기 위해 그의 jsfiddle을 약간 변경했다.

css: 스크롤할 공간이 있는지 확인하기 위해 임의의 높이를 추가합니다.

body{height:3000px;} 

js: 스크롤 위치 설정

jQuery(window).scrollTop(100);

그 결과 보고되는2개의 값이 다릅니다.http://jsfiddle.net/sNLMe/66/

업데이트 2015년 2월 14일

자체 오프셋 메서드(현재 스크롤 위치 관리)를 포함한 jqLite 대기용 풀 요청이 있습니다.직접 실장하고 싶은 경우는, 소스를 참조해 주세요.https://github.com/angular/angular.js/pull/3799/files

Angular 2+가 현재 요소의 오프셋을 가져오는 경우(this.el.nativeElement는 jquery의 $(this)와 동등함):

export class MyComponent implements  OnInit {

constructor(private el: ElementRef) {}

    ngOnInit() {
      //This is the important line you can use in your function in the code
      //-------------------------------------------------------------------------- 
        let offset = this.el.nativeElement.getBoundingClientRect().top;
      //--------------------------------------------------------------------------    

        console.log(offset);
    }

}

요소 [0].scrollTop을 사용해 보십시오.이 솔루션이 더 빠릅니다.

여기 더 큰 예가 있습니다.http://cvmlrobotics.blogspot.de/2013/03/angularjs-get-element-offset-position.html

언급URL : https://stackoverflow.com/questions/18953144/how-do-i-get-the-offset-top-value-of-an-element-without-using-jquery