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

[Anonymous]

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

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

element = viewChild.required('myWindow');

#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? Есть идеи, как исправить это вычисление и/или поведение без задержки в конструкторе компонента?
Вот StackBlitz, демонстрирующий проблему; вы можете изменить конструктор компонента окна, чтобы увидеть различные рабочие/неработающие комбинации.
ОБНОВЛЕНИЯ
Я подал Отчет об ошибках Angular, поскольку это проблема фреймворка; обходной путь необходим до тех пор, пока не будет доступно исправление Angular.

Как заметил Матье Риглер, правильным эффектом для взаимодействия с DOM является renderAfterEffect ; к сожалению, на данный момент это также не удается без тайм-аута или отключения горячей замены модуля (HMR):

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

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

Как отметил Нарен Мурали во второй части своего ответа, задержка тайм-аута поможет обойти проблему:

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

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

Однако, как заявил Матье Риглер, правильный обходной путь должен использовать renderAfterEffect.

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