使用ngx-scrollbar为ngx-bootstrap的选项卡内容添加滚动条。

Question

在我的项目中，我正在使用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中的代码

- Denis Stephanov

Answer 1

更新

试试这个

查看演示这里

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

- Jyoti Pathania

Answer 2

你可以给 ng-scrollbar 设置一个高度:

ng-scrollbar {
  height: 80vh;
}

Here is an edit of your stackblitz.

- ibenjelloun

---

对不起，这对我没有用。我正在使用flexbox来确保用户屏幕从上到下的“列视图”。并且用户查看更长的内容时应该在div中滚动，而不是整个应用程序。 - Denis Stephanov