角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

请让我知道在任何查询的情况。