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

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

• javascript
• html
• angular

• Put a dummy span inside that div and scroll into that span ? – Vega Commented May 27, 2018 at 7:01
• @Vega, that's a good idea, but depending on screen height the div needs to scroll to different positions. I suppose I could go crazy with the Renderer2 and put my span where I need it, but that has the potential to become a hot mess. – AvailableName Commented May 27, 2018 at 7:08
• It's just the one element, but depending on screen height and other visible elements it needs to scroll differently so that a particular div (in this case an input) is visible. – AvailableName Commented May 27, 2018 at 7:18

2 Answers 2

How about standard approach: Fist you assign a reference to your div like this:

<div #divToScroll></div>

then, you get a reference to your div:

@ViewChild('divToScroll') divToScroll: ElementRef;

and finally when you need to scroll you just call:

divToScroll.nativeElement.scrollTop = 30;

It becomes tedious when we need to scroll elements (let's say a particular div inside *ngFor). The best way is to get the current position and height of element like this:

Dynamically assign the id to each div: [attr.id]=" 'section' + data.id"

<div id="parentDiv" #parentDiv>
    <div *ngFor="let data of content" [attr.id]=" 'section' + data.id">
        <p>section {{data.id}}</p>
        <botton (click)="scrollMyDiv(data)"></button>
    </div>
</div>

And in the .ts file:

scrollMyDiv(item) {
    let section = 'section' + item.id);
    window.scroll(0, 0);  // reset window to top 
    const elem = document.querySelector('#' + section);
    let offsetTop = elem.getBoundingClientRect().top - x;  
    window.scroll(0, offsetTop);
}

getBoundingClientRect().top will give you the height from the top. x is any constant value like the height of your header section.

This is mostly used to provide scrollspy-like features.