css - 使用 ngx-scrollbar 获取 ngx-bootstrap 的选项卡内容
问题描述
在我的项目中,我使用的是 bootstrap 4 和 ngx-bootstrap。现在我需要创建一个包含 2 个可滚动 div 的组件,由选项卡切换。
我想在 stackblitz 中展示一个示例应用程序,但我无法创建它。
所以这是我要放置这些选项卡的组件:
<div class="d-flex flex-column h-100">
<div class="border-bottom align-items-center d-flex flex-shrink-0 pr-3 pl-3" style="height: 60px !important;">
<input type="text" class="form-control" id="search" placeholder="Search...">
</div>
<tabset [justified]="true">
<tab heading="Title 1">
<ng-scrollbar [autoHide]="true">
<app-foo-list></app-foo-list>
</ng-scrollbar>
</tab>
<tab class="" heading="Title 2">
<ng-scrollbar [autoHide]="true">
<app-foo-list></app-foo-list>
</ng-scrollbar>
</tab>
</tabset>
</div>
在 AppFooList 组件中,我将放置一个项目列表。例如,它将类似于以下代码:
hiiiiiiii <br>
hiiiiiiii <br>
hiiiiiiii <br>
hiiiiiiii <br>
...
您能帮我修复我的代码以使其正常工作吗?Ngx-scrollbar 不适用于选项卡的内容。我所有的尝试都以滚动整个应用程序结束,因为内容的高度比应用程序的其余部分大,或者内容可以滚动,但未应用 ngx-scrollbar 并且滚动条很丑。我需要 div 的高度是底部的其余空间。这就是我使用 flexbox 的原因。
编辑: stackblitz 中的代码
解决方案
更新
尝试这个
在这里查看演示
<div class="d-flex flex-column h-100">
<div class="border-bottom align-items-center d-flex flex-shrink-0 pr-3 pl-3" style="height: 60px !important;">
<input type="text" class="form-control" id="search" placeholder="Search...">
</div>
<tabset [justified]="true">
<tab heading="Title 1" [ngStyle]="{'height':'calc(100vh - ' + offsetHeightVal + 'px)'}">
<ng-scrollbar [autoHide]="true">
<app-foo-list></app-foo-list>
</ng-scrollbar>
</tab>
<tab class="" heading="Title 2" [ngStyle]="{'height':'calc(100vh - ' + offsetHeightVal + 'px)'}">
<ng-scrollbar [autoHide]="true">
<app-foo-list></app-foo-list>
</ng-scrollbar>
</tab>
</tabset>
</div>
app.component.ts
import { Component, AfterViewInit } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular 6';
offsetHeightVal: number; //default value
offset(el) {
var rect = el.getBoundingClientRect(),
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
scrollTop = window.pageYOffset || document.documentElement.scrollTop;
return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}
ngAfterViewInit() {
this.offsetHeightVal = this.offset(document.querySelector('.tab-content')).top
}
}
推荐阅读
- mongodb - 别名命令的方法或注意事项
- python - 在流上调用 flush() 后如何知道磁盘何时准备就绪?
- python - 画布上的 Tkinter ttk.Scrollbar 滚动正常,但滚动条小部件显示不正确?
- c++ - 我该如何解决这个问题?错误:找不到库 -lmysqlclient
- python - 如何阻止程序添加文件中已存在的对象?
- python - 如何在 Pygame 中减慢 Sprite FPS?
- ruby - 自动配置:找不到命令
- html - 样式 A 的第一个实例
- 仅元素,不从第二个实例中物理删除样式(并且不添加类或 ID)
- javascript - React Redux- Store 更新前超时
- java - 如何使用 Mockito 填充 POJO