角2：以編程方式DIV覆蓋

Question

內側的位置，我定製了PrimeNg TabView，爲了實現這個包裹它的自定義組件內：

正如你可以看到TabView的內容具有overflow-x: hidden所以它可以看起來更好，允許用戶在隱藏的標籤之間導航我已經添加了兩個按鈕，tabview的每一側。

現在我正在嘗試開發那些按鈕點擊功能，我不知道如何實現這一點。

這是我的組件看起來像：

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

歡迎任何幫助

Answer 1

我曾嘗試左右滾動上點擊一個div。

您也可以對選項卡執行相同的操作。

請查看以下鏈接，詳細參考

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

請讓我知道在任何查詢的情況。