angular4 scroll element into viewport

by roy barak

HTML

<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.8.5/dist/zone.min.js"></script>
<script src="https://unpkg.com/rxjs@5.2.0/bundles/Rx.min.js"></script>
<script src="https://unpkg.com/@angular/core@4.0.1/bundles/core.umd.js"></script>
<script src="https://unpkg.com/@angular/common@4.0.1/bundles/common.umd.js"></script>
<script src="https://unpkg.com/@angular/compiler@4.0.1/bundles/compiler.umd.js"></script>
<script src="https://unpkg.com/@angular/platform-browser@4.0.1/bundles/platform-browser.umd.js"></script>
<script src="https://unpkg.com/@angular/platform-browser-dynamic@4.0.1/bundles/platform-browser-dynamic.umd.js"></script>
<my-app></my-app>

SCSS

.wrapper {
    max-height: 300px;
    overflow-y: scroll;
}

li {
  background-color: #50514F;
  line-height: 90px;
  box-shadow: 0px 5px 10px rgba(136, 136, 136, 0.25);
  margin-bottom: 10px;
  min-height: 100px;
}

li:nth-child(2n) {
  background-color: #F25F5C;
}

li:nth-child(3n) {
  background-color: #FFE066;
}

li:nth-child(4n) {
  background-color: #247BA0;
}

li:nth-child(5n) {
  background-color: #70C1B3;
}
.main-wrapper{
    display: flex;
   
    .button-wrapper{
        padding: 20px;
        display: flex;
        flex-direction: column;
    }
    .nav-btn{
        margin-bottom: 20px;
    }
    .active{
      background-color:tomato;
    }
}

TypeScript

let { Component, NgModule, Input } = ng.core;

@Component({
  selector: 'my-app',
  template: `
<div class="main-wrapper">
    <div class="button-wrapper">
      
        <button *ngFor="let item of buttonsArr" 
        [ngClass]="{'active': item.isActive}"
        (click)="scrollToElement(item)"
        class="nav-btn">{{item.key}}</button>
    </div>
    <div class="content">
        <button (click)="scrollToElement()">Scroll prev</button>
        <button (click)="scrollToElement()">Scroll next</button>
<div class="wrapper">
    <li *ngFor="let item of itemList; let i = index" id="elem-{{i}}">{{item}}</li>
</div>
    </div>
</div>
  `,
})
class HomeComponent {
  text = 'foo';
  buttonsArr = [{key:'first', value:1},{key:'middle', value:4}, {key:'last', value:11}];
  testObject = {fieldFirst:'foo'};
  itemList = [
    '1', 
    '2', 
    '3', 
    '4',
    '5',
    '6',
    '7',
    '8',
    '9',
    '10',
    '11',
    '12',
  ];
  
  scrollToElement(elemId?) {
    if(elemId){
      document.getElementById("elem-"+elemId.value).scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
      this.buttonsArr.forEach(i => { i.isActive = false})
      elemId.isActive = true;
    }else{
      document.getElementById("elem-7").scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
    }
  
  }
}

const { BrowserModule } = ng.platformBrowser;

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ HomeComponent ],
  bootstrap:    [ HomeComponent ]
})
class AppModule { }

const { platformBrowserDynamic } = ng.platformBrowserDynamic;
platformBrowserDynamic().bootstrapModule(AppModule);