I have a div whose height is given and it has overflow-y: auto, so when necessary it has a scrollbar.

Now I want to be able to scroll that div a certain amount on an event. So far I've been able to scrollIntoView(false) 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 position: fixed relative to the window.

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).

<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>     

Typescript:

scrollToEndOfFilter(ev){ //ev == {shown: true/false, ref: ElementRef}

    if (ev == null || (ev.shown == true && ev.ref)){

      this.searchFormContainer.nativeElement.scrollTop = 950;

    }

}