Угловая 4 прокрутка делить определенную сумму

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 внутри * ngFor). Лучший способ - получить текущую позицию и высоту элемента, используя:

, динамически назначать id каждому div * 1003.*

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

и в .ts

  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 даст высоту сверху. x - это любое постоянное значение, например, высота вашего раздела заголовка.

в основном используется для предоставления функции, подобной scrollspy.

Answer 2

Как насчет стандартного подхода: сначала вы назначаете ссылку на свой div следующим образом:

<div #divToScroll></div>

, затем вы получаете ссылку на свой div:

@ViewChild('divToScroll') divToScroll: ElementRef;

и, наконец, когдавам нужно прокрутить, просто позвоните:

divToScroll.nativeElement.scrollTop = 30;