Angular 2: Programmatische an Position innerhalb div Overlay

Question

ich eine PrimeNg TabView angepasst haben und es in einer benutzerdefinierten Komponente, um dies zu erreichen, eingewickelt:

Wie Sie die TabView Inhalt overflow-x: hidden sehen kann, so hat es kann besser aussehen, um Benutzern zu ermöglichen, zwischen ausgeblendeten Tabs zu navigieren. Ich habe zwei Schaltflächen hinzugefügt, einen auf jeder Seite der Tabansicht.

Jetzt versuche ich, diese Schaltflächen zu entwickeln Klick-Funktionalität und ich weiß nicht, wie ich das erreichen kann. Diese

ist, wie meine Komponente wie folgt aussieht:

<div class="wrapper"> 
<a id="back" class="ripple" [style.backgroundColor]="ui.currentThemeBackground"><i class="material-icons">chevron_left</i></a> 
<p-tabView styleClass="tab-container" [style]="{'background-color':ui.currentThemeBackground}"> 
    <p-tabPanel *ngFor="let tab of store.linhaTempo | async; let i = index; " 
    [id]="index" [header]="tab.titulo" [selected]="tab.selecionada"></p-tabPanel> 
</p-tabView> 
<a id="forward" class="ripple" [style.backgroundColor]="ui.currentThemeBackground"><i class="material-icons">chevron_right</i></a> 
</div> 


linha-tempo .wrapper { 
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); 
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); 
    -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); 
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); 
    position: fixed; 
    top: 55px; 
    width: 100%; 
} 

linha-tempo .tab-container { 
    border: none !important; 
    margin: 0 auto; 
    width: calc(100% - 80px); 
    border-radius: 0px; 
} 

linha-tempo #back, linha-tempo #forward { 
    width: 40px; 
    position: fixed; 
    top: 55px; 
    line-height: 33px; 
    text-align: center; 
    cursor: pointer; 
} 

linha-tempo #back { 
    left: 0px; 
} 

linha-tempo #forward { 
    right:0px; 
} 

linha-tempo #back i, linha-tempo #forward i { 
    line-height: 2; 
    color: white; 
} 

linha-tempo .ui-tabview-panel { 
    display: none !important; 
} 

linha-tempo .ui-tabview-nav, linha-tempo .ui-tabview-nav > li.ui-state-active { 
    border-bottom: none !important; 
    background-color: transparent !important; 
    line-height: 1.8; 
} 

linha-tempo .ui-tabview-nav { 
    color: rgba(255, 255, 255, 0.6); 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
} 

linha-tempo .ui-tabview-nav > li { 
    border: none !important; 
    width: 150px; 
    border-radius: 0px 0px 0px 0px !important; 
    -webkit-border-radius: 0px 0px 0px 0px !important; 
    -moz-border-radius: 0px 0px 0px 0px !important; 
} 

linha-tempo .ui-tabview-nav > li.ui-state-active { 
    color: white; 
} 

linha-tempo .ui-tabview-nav a { 
    color: rgba(255, 255, 255, 0.7) !important; 
    width: 100%; 
    box-sizing: border-box; 
    text-align: center; 
    display: block; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden; 
} 

linha-tempo .ui-tabview-nav > li.ui-state-active a { 
    color: white !important; 
    border-bottom: 2px solid white; 
    cursor: default !important; 
} 

body .ui-tabview .ui-tabview-nav > li.ui-state-hover { 
    background-color: transparent !important; 
} 

Jede Hilfe

Answer 1

willkommen Ich habe versucht, nach rechts und links ein Div auf Klick Scrollen.

Sie können das gleiche auch für Tabs tun.

schauen bitte in den folgenden Link, um detaillierte Referenz

http://www.w3schools.com/code/tryit.asp?filename=FAB7S70J7UZD

Bitte mich bei jeder Abfrage wissen lassen.