Angular下拉菜单内虚拟滚动失效问题的修复请求

问题背景 #

使用Angular CDK虚拟滚动优化列表性能，普通页面中功能正常，但嵌套进多层<ul>/<li>构成的下拉菜单后，滚动到第3项时内容显示为空。下拉菜单通过点击按钮触发显示，虚拟滚动所在的子菜单需要hover特定项才会出现，排查确认问题源于组件初始状态为隐藏。

核心原因 #

Angular CDK虚拟滚动组件初始化时需要获取视口的尺寸、位置等布局信息。如果组件初始被设置为display: none（多数下拉菜单的默认隐藏方式），浏览器不会渲染该元素的布局，导致虚拟滚动无法正确计算可见区域和需要渲染的列表项，进而出现滚动时内容空白的问题。

修复步骤 #

1. 替换初始隐藏方式 #

避免用display: none隐藏子菜单，改用visibility: hidden + position: absolute的组合，这样元素的布局仍会被计算，虚拟滚动组件能正确初始化。

2. 显示时触发视口重新计算 #

在子菜单被hover显示时，手动调用虚拟滚动视口的checkViewportSize()方法，强制组件重新计算布局参数，确保渲染逻辑正常工作。

3. 校验父元素样式 #

确保虚拟滚动视口的父元素（如<li>）没有设置会破坏布局的样式，比如错误的overflow属性或高度值。

修改后的代码示例 #

HTML 代码 #

<ul class="dropdown-menu context-menu">
  <li class="dropdown-submenu" (mouseenter)="onSubmenuShow()">
    test<i class="far fa-angle-right"></i>
    <!-- 用自定义类初始隐藏子菜单 -->
    <ul class="dropdown-menu hidden-submenu" style="height: 220px">
      <li style="height: 200px">
        <cdk-virtual-scroll-viewport #virtualViewport class="example-viewport" itemSize="50">
          <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
        </cdk-virtual-scroll-viewport>
      </li>
    </ul>
  </li>
</ul>

CSS 代码 #

.context-menu {
    position: absolute;
    display: block;
    font-size: 13px;
    z-index: 1502 !important;
    min-width: 220px;
    left: -115px;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    min-width: 170px;
    top: 0;
    margin-top: -1px;
    font-size: 13px;
    padding-left: 5px;
    padding-bottom: 3px;
}

/* 初始隐藏子菜单：保留布局，禁止交互 */
.hidden-submenu {
    visibility: hidden;
    position: absolute;
    pointer-events: none;
}

/* hover时显示子菜单，恢复交互 */
.dropdown-submenu:hover .hidden-submenu {
    visibility: visible;
    pointer-events: auto;
}

.dropdown-menu-left {
    right: 100%;
    left: unset;
}

.example-viewport {
    width: 200px;
    height: 200px;
    border: 1px solid black;
}

.example-item {
    height: 50px;
}

TypeScript 代码 #

import { Component, ViewChild } from '@angular/core';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  // 模拟列表数据
  items = Array.from({length: 20}).map((_, index) => `Item ${index + 1}`);
  
  @ViewChild('virtualViewport') private virtualViewport: CdkVirtualScrollViewport;

  onSubmenuShow(): void {
    // 延迟执行，确保DOM已完成显示更新
    setTimeout(() => {
      if (this.virtualViewport) {
        // 强制重新计算视口尺寸
        this.virtualViewport.checkViewportSize();
        // 可选：重置滚动到顶部，避免显示异常
        this.virtualViewport.scrollToIndex(0);
      }
    }, 100);
  }
}

额外注意事项 #

• 如果使用Bootstrap等第三方下拉组件，需要覆盖其默认的display: none隐藏样式，避免冲突。
• 若仍存在渲染异常，可尝试在onSubmenuShow中调用ChangeDetectorRef.detectChanges()强制触发组件变更检测。

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