Angular 4 将 div 滚动一定量

Question

我有一个 div，它的高度已经给定并且它有overflow-y: auto，所以在必要时它有一个滚动条。
现在我希望能够在事件上滚动该 div 一定数量。到目前为止，我已经能够将scrollIntoView(false)它滚动到底部。我想几乎滚动它，但不是完全滚动到底部。我不想滚动窗口，因为这个 div 是position: fixed相对于窗口的。
据我所知，这在技术上是可行的，但人们一直在提及各种插件。现在插件不是一个选项（也许是未来的某个版本，但不是现在）。

<form novalidate #searchFilterForm [formGroup]="filterForm" role="application">
<section id="searchFilters" role="form">
  <div class="search-filter-tab" #searchFilterTab>
    ..
  </div>
<div #searchFormContainer class="search-filter-container" >
  <div class="search-filter-header">  
    ...
  </div>
  <fieldset class="search-filter-checkboxes search-mobile-small" >
    ...
  </fieldset>
  <fieldset class="search-filter-sliders search-mobile-small" >
    ...
    </div>
  </fieldset>
  <fieldset class="search-filter-dropdowns search-mobile-small" >
    ...
  </fieldset>
  <fieldset >
    <span #scrollToHere></span>
    <div class="search-filter-text-input-container search-mobile-small" *ngFor="let textItem of searchBoxList; trackBy: trackByFunc; let i = index;">

      <app-auto-complete 
              #autoCompleteBoxes
              ...
              (showToggled)="scrollToEndOfFilter($event)"
              >
          <input 
            type="text" 
            autocomplete="off"
            [attr.name]="textItem.apiName" 
            [placeholder]="textItem.label" 
            [attr.aria-label]="textItem.label"         
            class="search-filter-text-input" 
            >
      </app-auto-complete>
    </div>
  </fieldset>
</div>
</section>
</form>     

打字稿：

scrollToEndOfFilter(ev){ //ev == {shown: true/false, ref: ElementRef}
    if (ev == null || (ev.shown == true && ev.ref)){
      this.searchFormContainer.nativeElement.scrollTop = 950;
    }
}

Answer 1

标准方法如何：首先，您可以像这样为 div 分配一个引用：

<div #divToScroll></div>

然后，您将获得对 div 的引用：

@ViewChild('divToScroll') divToScroll: ElementRef;

最后，当您需要滚动时，只需调用：

divToScroll.nativeElement.scrollTop = 30;