Как Overlay | Angular Material настроить чтобы реагировал на внутрутрение блоки с прокруткой?

Angular Material предоставляет компонент Overlay, который может использоваться для создания всплывающих окон, модальных окон и других визуальных элементов. По умолчанию Overlay не реагирует на прокручиваемые блоки, однако его можно настроить для обработки событий прокрутки внутри таких блоков.

Для начала, убедитесь, что у вас установлены необходимые зависимости для работы с Angular Material и Overlay. Перед использованием компонента Overlay, добавьте его в зависимости вашего модуля:

import { OverlayModule } from '@angular/cdk/overlay';

@NgModule({
  imports: [
    OverlayModule
  ]
})
export class AppModule { }

Когда это сделано, вы можете настроить Overlay, чтобы он реагировал на прокрутку внутри блоков. Для этого вы можете использовать метод position().global().top(), чтобы определить позицию всплывающего окна, а затем использовать метод scrollStrategy() для указания стратегии прокрутки. В вашем случае вам понадобится стратегия RepositionScrollStrategy, которая автоматически обновляет позицию всплывающего окна при прокрутке.

import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
import { ScrollDispatcher, RepositionScrollStrategy } from '@angular/cdk/scrolling';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss']
})
export class ExampleComponent {
  constructor(private overlay: Overlay, private scrollDispatcher: ScrollDispatcher) {
    const positionStrategy = this.overlay.position()
      .global()
      .top('20px');

    const scrollStrategy = this.overlay.scrollStrategies.reposition();

    const overlayConfig = new OverlayConfig({
      positionStrategy,
      scrollStrategy
    });

    const overlayRef = this.overlay.create(overlayConfig);

    this.scrollDispatcher.scrolled().subscribe(() => {
      overlayRef.updatePosition();
    });
  }
}

В приведенном коде мы создаем инстанс OverlayConfig, в котором указываем стратегию позиционирования, используя метод top() для определения вертикального смещения всплывающего окна. Затем мы указываем стратегию прокрутки, используя метод reposition().

Для обновления позиции всплывающего окна при прокрутке мы подписываемся на событие scrolled() объекта ScrollDispatcher и вызываем метод updatePosition() для OverlayRef.

Теперь ваше всплывающее окно будет реагировать на прокрутку внутри блоков с прокруткой.