Angular中*ngIf隐藏元素阻碍下层Div滚动的解决方法问询

问题根源 #

你当前的代码通过*ngFor生成了多个.item3容器，仅用*ngIf控制内部<p>标签的显示/隐藏。这意味着即使<p>被隐藏，外层的.item3 div仍然会被渲染，且所有.item3都占据Grid布局的同一区域（column 2-4，row 2-4），它们会层叠在一起。上层的空.item3会拦截鼠标滚动事件，导致下层有内容的容器无法响应滚动。

解决方案 #

方案1：将*ngIf移到.item3容器上（推荐）

直接控制整个.item3容器的渲染，只有匹配当前part值的容器才会被生成，从根源避免多余DOM元素：

<!-- 替换原有的.item3循环结构 -->
<div *ngFor="let i of array" class="item3" *ngIf="part == i">
     <p>{{texts[i-1]}}</p>
</div>

更高效的写法：无需循环所有项，直接根据当前part值渲染对应内容，减少不必要的DOM生成：

<div class="item3">
     <p>{{texts[part-1]}}</p>
</div>

方案2：给不匹配的.item3添加display: none样式

如果必须保留*ngFor结构，通过NgClass给不匹配的容器添加隐藏样式，让它们完全从布局中消失：

<div *ngFor="let i of array" class="item3" [ngClass]="{'hidden': part != i}">
     <p *ngIf="part == i">{{texts[i-1]}}</p>
</div>

在CSS中添加：

.hidden {
    display: none;
}

效果验证 #

修改后，页面上只会存在一个有效的.item3容器，没有多余的层叠元素遮挡，滚动事件就能正常触发。

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