Angular：cdk-virtual-scroll内mat-menu上下文菜单定位偏移求助

问题原因 #

cdk-virtual-scroll-viewport 内部的内容容器会通过 transform 属性实现虚拟滚动偏移，而CSS规则中，设置fixed定位的元素会相对于最近的包含transform/perspective/filter属性的祖先元素定位，而非浏览器视口。你当前的菜单触发元素（fixed的div）嵌套在虚拟滚动容器内，导致其定位参考系变成了虚拟滚动的内容容器，而非整个浏览器视口，因此滚动后坐标出现偏移。

解决方案：使用Overlay全局定位菜单 #

直接利用Angular CDK的Overlay来定位菜单，菜单会被渲染到body层级，不受虚拟滚动容器的transform影响。

步骤1：修改子组件模板

移除原有的fixed触发div，保留菜单和卡片：

<mat-card class='project-card' (contextmenu)="onRightClick($event)">
  <!-- 其他元素 -->
</mat-card>

<mat-menu #menu="matMenu">
  <button mat-menu-item (click)="onEdit(project.id)"><mat-icon>edit</mat-icon>Edit</button>
  <button mat-menu-item (click)="onDelete(project.id)"><mat-icon>delete_outline</mat-icon>Delete</button>
</mat-menu>

步骤2：修改子组件逻辑

注入Overlay，并在右键事件中创建全局定位策略，直接将菜单定位到鼠标位置：

import { Component, Input, ViewChild } from '@angular/core';
import { MatMenuTrigger } from '@angular/material/menu';
import { Overlay } from '@angular/cdk/overlay';

@Component({
  selector: 'app-project-card',
  templateUrl: './project-card.component.html',
  styleUrls: ['./project-card.component.css']
})
export class AppProjectCardComponent {
  @Input() project: any;
  @ViewChild(MatMenuTrigger) matMenuTrigger!: MatMenuTrigger;

  constructor(private overlay: Overlay) {}

  onRightClick(event: MouseEvent) {
    event.preventDefault();

    // 创建全局定位策略，直接绑定鼠标的视口坐标
    const positionStrategy = this.overlay.position()
      .global()
      .left(`${event.clientX}px`)
      .top(`${event.clientY}px`);

    // 传入定位策略打开菜单
    this.matMenuTrigger.openMenu(positionStrategy);
  }

  onEdit(id: any) {
    // 你的编辑逻辑
  }

  onDelete(id: any) {
    // 你的删除逻辑
  }
}

替代方案：将触发元素移到虚拟滚动容器外

如果不想用Overlay，可以把菜单的触发div移到cdk-virtual-scroll-viewport外面，确保它的祖先没有transform属性：

1. 在父组件模板中添加触发div：

<cdk-virtual-scroll-viewport itemSize="115px" class="scrollable-card">
  <div *cdkVirtualFor="let project of projects">
   <app-project-card [project]="project" (contextmenu)="onCardRightClick($event, project)"></app-project-card>
  </div>
</cdk-virtual-scroll-viewport>

<!-- 触发元素移到虚拟滚动容器外 -->
<div style="visibility: hidden; position: fixed;" 
     #menuTrigger 
     [style.left]="menuTopLeftPosition.x"
     [style.top]="menuTopLeftPosition.y" 
     [matMenuTriggerFor]="menu"></div>

<mat-menu #menu="matMenu">
  <button mat-menu-item (click)="onEdit()"><mat-icon>edit</mat-icon>Edit</button>
  <button mat-menu-item (click)="onDelete()"><mat-icon>delete_outline</mat-icon>Delete</button>
</mat-menu>

2. 父组件逻辑处理右键事件：

import { Component, ViewChild, MatMenuTrigger } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  projects: any[] = [];
  menuTopLeftPosition = {x: '0px', y: '0px'};
  @ViewChild('menuTrigger') menuTrigger!: MatMenuTrigger;
  currentProjectId: any;

  onCardRightClick(event: MouseEvent, project: any) {
    event.preventDefault();
    this.currentProjectId = project.id;
    this.menuTopLeftPosition.x = `${event.clientX}px`;
    this.menuTopLeftPosition.y = `${event.clientY}px`;
    this.menuTrigger.openMenu();
  }

  onEdit() {
    // 使用this.currentProjectId执行编辑逻辑
  }

  onDelete() {
    // 使用this.currentProjectId执行删除逻辑
  }
}

这样触发元素位于虚拟滚动容器外，没有受transform影响的祖先，fixed定位会基于浏览器视口，坐标就能正确对应鼠标位置。

验证 #

两种方案都能解决虚拟滚动下右键菜单的定位偏移问题，推荐第一种使用Overlay的方案，更符合Angular Material的组件设计规范，也避免了跨组件传递事件的复杂度。

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