Для того чтобы Overlay из Angular Material реагировал на блоки с прокруткой внутри, вам нужно использовать CDK Scrollable.
1. Установите необходимые пакеты, выполнив следующую команду:
```
npm install @angular/cdk @angular/material
```
2. Импортируйте необходимые модули в вашем Angular-модуле:
```typescript
import { ScrollingModule } from '@angular/cdk/scrolling';
import { OverlayModule } from '@angular/cdk/overlay';
import { MatTooltipModule } from '@angular/material/tooltip';
@NgModule({
imports: [
ScrollingModule,
OverlayModule,
MatTooltipModule
],
})
export class AppModule { }
```
3. Создайте overlay:
```typescript
import { Component, ViewContainerRef } from '@angular/core';
import { Overlay } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
@Component({
selector: 'app-example',
template: `
<div style="height: 300px; overflow-y: auto;" #scrollContainer>
<div style="height: 500px;">Scrollable content</div>
<button mat-raised-button (click)="showOverlay($event)">Show Overlay</button>
</div>
`,
})
export class ExampleComponent {
constructor(
private overlay: Overlay,
private viewContainerRef: ViewContainerRef
) {}
showOverlay(event: MouseEvent) {
const target = event.target as HTMLElement;
const positionStrategy = this.overlay.position()
.flexibleConnectedTo(target)
.withDefaultOffsetX(5)
.withDefaultOffsetY(5);
const overlayRef = this.overlay.create({
positionStrategy,
scrollStrategy: this.overlay.scrollStrategies.reposition(),
hasBackdrop: true,
});
overlayRef.attach(new ComponentPortal(YourComponent, this.viewContainerRef));
}
}
```
4. Ваш Tooltip или другой Overlay-компонент должен быть вставлен в cdk-overlay-pane, который является потомком компонента, содержащего блок с прокруткой (scrollContainer):
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-your-component',
template: `
<div cdk-overlay-pane>
Tooltip content
</div>
`,
})
export class YourComponent {}
```
Теперь Overlay будет перемещаться вместе с блоками с прокруткой внутри.
Что касается тултипа, который не перемещается при прокрутке, это может быть связано с некоторыми стилями или с настройками Overlay. Убедитесь, что используете актуальную версию Angular Material и правильно настроили Overlay для перемещения с прокруткой. Если проблема остается, пожалуйста, укажите больше деталей о вашей проблеме или предоставьте код, чтобы мы могли вам помочь.