title: Angular 4 scroll a div a certain amount
body: <p>I have a div whose height is given and it has <code>overflow-y: auto</code>, so when necessary it has a scrollbar.<br>
  Now I want to be able to scroll that div a certain amount on an event. So far I've been able to <code>scrollIntoView(false)</code> which just scrolls it to the bottom. I want to scroll it almost, but not quite to the bottom. I do not want to scroll the window, as this div is <code>position: fixed</code> relative to the window.<br>
  From what I've seen this is technically possible, but people keep referring to various plugins. Right now a plugin is not an option (maybe for some future release, but not now).  </p>
  
  <pre><code>&lt;form novalidate #searchFilterForm [formGroup]="filterForm" role="application"&gt;
  &lt;section id="searchFilters" role="form"&gt;
    &lt;div class="search-filter-tab" #searchFilterTab&gt;
      ..
    &lt;/div&gt;
  &lt;div #searchFormContainer class="search-filter-container" &gt;
    &lt;div class="search-filter-header"&gt;  
      ...
    &lt;/div&gt;
    &lt;fieldset class="search-filter-checkboxes search-mobile-small" &gt;
      ...
    &lt;/fieldset&gt;
    &lt;fieldset class="search-filter-sliders search-mobile-small" &gt;
      ...
      &lt;/div&gt;
    &lt;/fieldset&gt;
    &lt;fieldset class="search-filter-dropdowns search-mobile-small" &gt;
      ...
    &lt;/fieldset&gt;
    &lt;fieldset &gt;
      &lt;span #scrollToHere&gt;&lt;/span&gt;
      &lt;div class="search-filter-text-input-container search-mobile-small" *ngFor="let textItem of searchBoxList; trackBy: trackByFunc; let i = index;"&gt;
  
        &lt;app-auto-complete 
                #autoCompleteBoxes
                ...
                (showToggled)="scrollToEndOfFilter($event)"
                &gt;
            &lt;input 
              type="text" 
              autocomplete="off"
              [attr.name]="textItem.apiName" 
              [placeholder]="textItem.label" 
              [attr.aria-label]="textItem.label"         
              class="search-filter-text-input" 
              &gt;
        &lt;/app-auto-complete&gt;
      &lt;/div&gt;
    &lt;/fieldset&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  &lt;/form&gt;     
  </code></pre>
  
  <p>Typescript:  </p>
  
  <pre><code>scrollToEndOfFilter(ev){ //ev == {shown: true/false, ref: ElementRef}
      if (ev == null || (ev.shown == true &amp;&amp; ev.ref)){
        this.searchFormContainer.nativeElement.scrollTop = 950;
      }
  }
  </code></pre>