如何让ngx-scrollbar在ngx-bootstrap标签页内容中正常工作？

Got it, let's fix that ngx-scrollbar issue in your ngx-bootstrap tabs! The core problem here is that ngx-scrollbar requires a clear, constrained height to calculate its scrollable area. Your current Flexbox layout wasn't properly passing the height context down through the tab components, which is why you were getting full-page scrolling or ugly native bars.

Here's the revised code that'll get everything working as expected:

<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;">
    <input type="text" class="form-control" id="search" placeholder="Search...">
  </div>

  <!-- 标签页容器：占满剩余空间，采用垂直Flex布局 -->
  <tabset [justified]="true" class="d-flex flex-column flex-grow-1 overflow-hidden">
    <!-- 单个标签页：填充标签页容器的可用空间，向下传递高度上下文 -->
    <tab heading="Title 1" class="flex-grow-1 d-flex flex-column">
      <ng-scrollbar [autoHide]="true" class="flex-grow-1">
        <app-foo-list></app-foo-list>
      </ng-scrollbar>
    </tab>
    <tab heading="Title 2" class="flex-grow-1 d-flex flex-column">
      <ng-scrollbar [autoHide]="true" class="flex-grow-1">
        <app-foo-list></app-foo-list>
      </ng-scrollbar>
    </tab>
  </tabset>
</div>

关键修改说明： #

• 标签页容器（tabset）：添加了d-flex flex-column flex-grow-1 overflow-hidden
  • flex-grow-1让标签页区域占满搜索栏下方的所有剩余空间
  • flex-column确保标签内容采用垂直布局
  • overflow-hidden防止标签内容溢出到外层容器，避免触发整页滚动
• 单个标签页（tab）：添加了flex-grow-1 d-flex flex-column
  • 强制每个标签的内容区域填充标签页容器的可用空间，将高度上下文传递给内部的滚动条组件
• ng-scrollbar：添加了flex-grow-1
  • 让滚动容器填满整个标签内容区域，这样ngx-scrollbar就能正确计算可滚动高度，显示自定义滚动条

必要的全局样式补充： #

请确保你的根布局有正确的高度设置（添加到全局styles.css/scss中）：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

app-root {
  display: block;
  height: 100%;
}

这一步保证初始高度上下文能一直传递到你的组件Flex容器。完成这些修改后，每个标签页的滚动条会被限制在标签内部，使用ngx-scrollbar的自定义样式，并且完美填充剩余空间。

内容的提问来源于stack exchange，提问作者Denis Stephanov