Question

我正在尝试创建一个不会滚动的页面。页面上的某些子元素可以滚动，但是我试图阻止页面整体滚动。我有一个非常嵌套的子元素，当子元素溢出时，它会收到一个滚动条，但也会导致主文档增大并收到一个滚动条。

这是问题的核心，但是还有更多嵌套级别可能是一个因素。

import { forkJoin } from 'rxjs';
import { shareReplay } from 'rxjs/operators';

getRiskTable() : Observable<Risk[]> {
  const tableObservable = this.riskService.getRiskTable().pipe(shareReplay());
  tableObservable.subscribe((res) => this.riskTable = res, (err) => {this.error = err;});
  return tableObservable;
}

getAllData() {
  let riskTable = this.getRiskTable();
  let risks = this.getAllRisks(); // should also return some observable

  forkJoin(riskTable, risks).subscribe(_ => {
    // all observables have been completed
  });
}

这支密码笔演示了如何设置我的应用程序。溢出的元素嵌套在许多flex显示器的深处（来自bootstrap 4实用程序类）。

https://codepen.io/averyferrante/pen/YMdNpO

我只希望滚动代码笔的绿色部分，而不希望整个文档也增长/滚动。

Answer 1

问题是您的几个容器缺少高度定义。结果，这些容器的子级忽略了应用于它们的百分比高度。

将此添加到您的代码中：

 <div class="flex-grow-1" style="height: calc(100% - 48px);">

此高度规则为容器提供了定义的高度，同时可以补偿其同级容器的高度。

另一个高度规则在以下三个层次上均缺失：

 <div class="d-flex flex-column w-100" style="height: 100%;">

revised codepen

更详细的解释：

Answer 2

您尝试过玩position: absolute吗？然后，您可以根据需要设置宽度和高度，红色框将看到其滚动条消失！

溢出导致整个页面滚动

2 个答案: