时间戳

首页 > 解决方案 > scrollIntoView 平滑滚动在 Angular 9 中应该下降得更多

javascript - scrollIntoView 平滑滚动在 Angular 9 中应该下降得更多

问题描述

从 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",

“devDependencies”：{“@angular-devkit/build-angular”：“^0.901.9”，“@angular/cli”：“9.0.3”，“@angular/compiler-cli”：“9.0.2” ,

标签： javascriptangularautoscroll

解决方案

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

推荐阅读