scrollIntoView 平滑滚动在 Angular 9 中应该向下移动

Question

从 Angular 8 升级到 Angular 9 后，我遇到了一个问题，即平滑滚动导致滚动更向下，因此元素甚至不在视图中，而是向上更多。这只发生在我路线改变，如果路线保持不变 - 平滑滚动是好的。

实施： 我创建了一个滚动指令：

@Directive({
  selector: '[scrollToSelected]'
})
export class ScrollToSelectedDirective implements AfterViewInit {
  @Input('scrollToSelected') scrollToClass: string;

  constructor(private el: ElementRef, private renderer: Renderer2) {
  }

  ngAfterViewInit() {
    if (this.el.nativeElement.classList.contains(this.scrollToClass)) {
      this.el.nativeElement.scrollIntoView({ block: 'center', behavior: 'smooth' });
    }
  }

在模板上我有条件地附加选定的类：

<div class="order-job-operation-component"
     *ngIf="operation$ | async as operation"
     [scrollToSelected]="'selected'"
     [class.selected]="operation.isSelected">

一旦我删除了流畅的行为 - 它再次运行良好。

“依赖”：{ "@angular/animations": "9.0.2", "@angular/cdk": "9.0.1", "@angular/common": "9.0.2", "@angular/compiler": "9.0.2", "@angular/core": "9.0.2", "@angular/flex-layout": "9.0.0-beta.29", "@angular/forms": "9.0.2", "@angular/localize": "9.0.2", "@angular/material": "9.0.1", "@angular/platform-b​​rowser": "9.0.2", "@angular/platform-b​​rowser-dynamic": "9.0.2", "@angular/router": "9.0.2",

“开发依赖”：{ "@angular-devkit/build-angular": "^0.901.9", "@angular/cli": "9.0.3", "@angular/compiler-cli": "9.0.2",

Answer 1

试试这个.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });