Angular CDK - 滚动时叠加附加到目标

Question

我正在尝试使用 Angular CDK 实现覆盖。Overlay 用于具有水平滚动的容器内。如果我们滚动到左侧，覆盖层应该坚持到原始位置或消失。

我可以使用 CDK 指令成功实现此行为。（通过单击“打开”按钮并向左滚动来打开叠加层）。覆盖层跟随按钮。

使用指令的 Stackblitz 示例

我尝试在不使用指令但使用覆盖服务的情况下实现相同的目标。

使用服务的 Stackblitz 示例

在这种情况下，覆盖层将保持不变，不会随内容移动。我需要在指令上使用服务，因为我们会将其封装在自定义指令后面。关于如何通过服务实现与指令相同的行为的任何想法都非常受欢迎？提前谢谢。

Answer 1

我认为您应该能够通过以下配置来实现该行为：

this.overlayRef = this.overlay.create({
  scrollStrategy: this.overlay.scrollStrategies.reposition(), // remove autoClose: true option
  hasBackdrop: false,
  positionStrategy: this.overlay
    .position()
    .flexibleConnectedTo(this.button)
    .setOrigin(this.button)
    .withScrollableContainers([this.scrollContainer])
    .withPositions([                                         // correct this as you want
      {
        originX: "start",
        originY: "bottom",
        overlayX: "start",
        overlayY: "top"
      }
    ])
    .withFlexibleDimensions(false)                          // add this
    .withPush(false)                                       // add this
}); 

叉式堆栈闪电战