Блог

Мне нужен тот же результат в Angular, что и в jQuery/HTML. Используя jQuery, я получаю то же значение topOffset, если я прокручиваю или нет.

 // get the top offset of the dropdown (distance from top of the page)
var topOffset = $(".dropdown").offset().top;
 

К вашему сведению, в Angular я использую переменную шаблона с @ViewChild, но значение topOffset изменилось и не дает того же требуемого результата, что и в jQuery.

   @ViewChild('dp') dropdown: ElementRef
  functionName() {
     let topOffset = this.dropdown.nativeElement.getBoundingClientRect().top;
  }
 

Пожалуйста, дайте мне знать в комментарии, что я должен сделать, чтобы достичь требуемого результата.

Просто добавьте .top смещение относительно его места в документе, а не относительно порта просмотра

Вы можете получить смещение сверху документа, используя это

  this.dropdown.nativeElement.getBoundingClientRect().top
 

Вы можете использовать offsetTop вместо getBoundingClientRect().top

  @ViewChild('dp') dropdown: ElementRef
  functionName() {
     let topOffset = this.dropdown.nativeElement.offsetTop;
  }
 

Проверьте простой пример здесь:

https://stackblitz.com/edit/angular-ivy-6jmua2?file=src/app/app.component.html

jQuery с открытым исходным кодом, если вы поищете в github (эта ссылка), вы увидите

 offset: function( options ) {
    ...
    rect = elem.getBoundingClientRect();
    win = elem.ownerDocument.defaultView;
    return {
        top: rect.top   win.pageYOffset,
        left: rect.left   win.pageXOffset
    };
 }
 

Как вы видите, вам нужно добавить win.pageYOffset

Таким образом, вы можете создать функцию

   getOffset(element:HTMLElement){
    const rect = element.getBoundingClientRect();
        const win = element.ownerDocument.defaultView;
        return {
            top: rect.top   win.pageYOffset,
            left: rect.left   win.pageXOffset
        };
  }
 

И использовать

 this.offset= this.getOffset(this.dropdown.nativeElement)
 

Вы можете увидеть в этом стекблитце