Angular viewChild: особенности макета CSS-окна с возможностью прокрутки ⇐ CSS

[Anonymous]

У меня есть компонент, встроенный в большое приложение Angular 19, с окном с возможностью вертикальной прокрутки, в котором содержимое за пределами окна скрыто, т. е. содержимое окна выходит за пределы верхней и нижней части фиксированного окна, и содержимое может центрироваться нажатием кнопки. Горизонтальная прокрутка отсутствует.
Первоначальное центрирование содержимого осуществляется с помощью эффекта в конструкторе:

Код: Выделить всё

element = viewChild.required('my-container');

#scrollTo = computed(() => {
const nativeElement = this.element().nativeElement;
const scrollHeight: number = nativeElement.scrollHeight;
const offsetHeight: number = nativeElement.offsetHeight;

return 4 + (scrollHeight - offsetHeight) / 2;
});

constructor() {
effect(() =>
this.element().nativeElement.scrollTo(0, this.#scrollTo())
);
}

В большинстве случаев ScrollHeight составляет 700 пикселей, а offsetHeight – 300 пикселей, и все работает правильно; однако примерно в одном из десяти или пятнадцати обновлений (в Chrome) значения ScrollHeight и offsetHeight одинаковы, в данном случае 38 пикселей, что приводит к сбою центрирования.
Как вы могли догадаться, жесткое программирование значения прокрутки не решает проблему (и это также не является жизнеспособным решением).
Я предполагаю, что это гонка -условие между расчетом макета Chrome и ScrollTo расчет сигнала? Есть идеи, как исправить этот расчет и/или поведение, не внося задержку в конструктор компонента?

Как отметил Нарен Мурали во второй части своего ответьте, задержка решит проблему; со следующим я не видел неудачного центрирования более чем в пятидесяти обновлениях:

Код: Выделить всё

constructor() {
effect(() =>
setTimeout(() =>
this.element().nativeElement.scrollTo(0, this.#scrollTo()),
200
)
);
}

Вот демонстрация StackBlitz.
Отчет об ошибке Angular:
https://github.com/angular/angular/issues/59426

Подробнее здесь: https://stackoverflow.com/questions/793 ... out-quirks