Как добиться зафиксированного скролла с помощью RxJs?

У меня есть блок с mat-table внутри. У него есть скрол. Изначально значение этого скрола 0. Мне нужно, чтобы значение было 2 или больше. Если прокрутить до высоты 0, чтобы автоматически перещелкивалось на 2, то же самое с окончательным значением прокрутки. Если прокрутили 1000, то после прокрутки до 1000 оно изменилось на 998.

файл TS:

export class GridComponent implements OnInit {

  public dataSource: Post[] = [];
  public displayedColumns: string [] = ['id', 'title', 'body'];

  @ViewChild('content', {static: true}) content: ElementRef;

  constructor(private service: DataService) {

  }

  ngOnInit(): void {
    this.getAllPosts()

    fromEvent(this.content.nativeElement, 'scroll').pipe(
      map((event: Event) => (event.target as Element).scrollTop)).subscribe(data => console.log(data))
  }

  getAllPosts() {
    this.service.getData().pipe().subscribe(data => {
      this.dataSource = data
    })
  }

}

файл HTML:

<div #content class="mat-elevation-z8 content">
  <table mat-table [dataSource]="dataSource" >
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef>ID</th>
      <td mat-cell *matCellDef="let element"> {{element.id}} </td>
    </ng-container>

    <ng-container matColumnDef="title">
      <th mat-header-cell *matHeaderCellDef>Title</th>
      <td mat-cell *matCellDef="let element"> {{element.title}} </td>
    </ng-container>

    <ng-container matColumnDef="body">
      <th mat-header-cell *matHeaderCellDef>Body</th>
      <td mat-cell *matCellDef="let element"> {{element.body}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>