使用 ngx-scrollbar 获取 ngx-bootstrap 的选项卡内容

Posted 2023-03-06

【中文标题】使用 ngx-scrollbar 获取 ngx-bootstrap 的选项卡内容

【英文标题】：Use ngx-scrollbar for ngx-bootstrap's tab content

【发布时间】：2018-10-26 19:28:20

【问题描述】：

在我的项目中，我使用的是 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 的原因。

编辑： code in stackblitz

【参考方案1】：

更新

试试这个

查看演示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
  

【参考方案2】：

您可以对ng-scrollbar 应用高度：

ng-scrollbar 
  height: 80vh;

Here is an edit of your stackblitz.

【讨论】：

很抱歉，但这对我没有用处。我正在使用 flexbox 来确保从用户屏幕的顶部到底部的“列视图”。作为用户视图的较长内容应该可以在 div 中滚动，而不是整个应用程序。