私のプロジェクトでは、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-スクロールバーはタブのコンテンツでは機能しません。コンテンツの高さがアプリの他の部分よりも大きいか、コンテンツはスクロール可能ですが、ngx-scrollbarが適用されず、スクロールバーが醜いため、すべての試行はアプリ全体をスクロールすることで終了しました。 divの高さを、残りのスペースの下部にする必要があります。これが私がフレックスボックスを使用している理由です。
編集: stackblitzのコード
更新
これを試して
デモを確認してください here
<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
}
}